diff --git a/en/application-dev/ability/fa-dataability.md b/en/application-dev/ability/fa-dataability.md index faad709b280730f5f96c79a905fe6385f04fce62..1319ba6868d4ecd0149ea644a197adcf573646c1 100644 --- a/en/application-dev/ability/fa-dataability.md +++ b/en/application-dev/ability/fa-dataability.md @@ -6,25 +6,24 @@ A Data ability helps applications manage access to data stored by themselves and Data ability providers can customize data access-related APIs such as data inserting, deleting, updating, and querying, as well as file opening, and share data with other applications through these open APIs. - ## Available APIs **Table 1** Data ability lifecycle APIs |API|Description| |:------|:------| -|onInitialized?(info: AbilityInfo): void|Called during ability initialization to initialize the relational database (RDB).| -|update?(uri: string, valueBucket: rdb.ValuesBucket, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\): void|Updates data in the database.| -|query?(uri: string, columns: Array\, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\): void|Queries data in the database.| -|delete?(uri: string, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\): void|Deletes one or more data records from the database.| -|normalizeUri?(uri: string, callback: AsyncCallback\): void|Normalizes the URI. A normalized URI applies to cross-device use, persistence, backup, and restore. When the context changes, it ensures that the same data item can be referenced.| -|batchInsert?(uri: string, valueBuckets: Array\, callback: AsyncCallback\): void|Inserts multiple data records into the database.| -|denormalizeUri?(uri: string, callback: AsyncCallback\): void|Converts a normalized URI generated by **normalizeUri** into a denormalized URI.| -|insert?(uri: string, valueBucket: rdb.ValuesBucket, callback: AsyncCallback\): void|Inserts a data record into the database.| -|openFile?(uri: string, mode: string, callback: AsyncCallback\): void|Opens a file.| -|getFileTypes?(uri: string, mimeTypeFilter: string, callback: AsyncCallback>): void|Obtains the MIME type of a file.| -|getType?(uri: string, callback: AsyncCallback\): void|Obtains the MIME type matching the data specified by the URI.| -|executeBatch?(ops: Array\, callback: AsyncCallback\>): void|Operates data in the database in batches.| -|call?(method: string, arg: string, extras: PacMap, callback: AsyncCallback\): void|Calls a custom API.| +|onInitialized(info: AbilityInfo): void|Called during ability initialization to initialize the relational database (RDB).| +|update(uri: string, valueBucket: rdb.ValuesBucket, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\): void|Updates data in the database.| +|query(uri: string, columns: Array\, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\): void|Queries data in the database.| +|delete(uri: string, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\): void|Deletes one or more data records from the database.| +|normalizeUri(uri: string, callback: AsyncCallback\): void|Normalizes the URI. A normalized URI applies to cross-device use, persistence, backup, and restore. When the context changes, it ensures that the same data item can be referenced.| +|batchInsert(uri: string, valueBuckets: Array\, callback: AsyncCallback\): void|Inserts multiple data records into the database.| +|denormalizeUri(uri: string, callback: AsyncCallback\): void|Converts a normalized URI generated by **normalizeUri** into a denormalized URI.| +|insert(uri: string, valueBucket: rdb.ValuesBucket, callback: AsyncCallback\): void|Inserts a data record into the database.| +|openFile(uri: string, mode: string, callback: AsyncCallback\): void|Opens a file.| +|getFileTypes(uri: string, mimeTypeFilter: string, callback: AsyncCallback>): void|Obtains the MIME type of a file.| +|getType(uri: string, callback: AsyncCallback\): void|Obtains the MIME type matching the data specified by the URI.| +|executeBatch(ops: Array\, callback: AsyncCallback\>): void|Operates data in the database in batches.| +|call(method: string, arg: string, extras: PacMap, callback: AsyncCallback\): void|Calls a custom API.| ## How to Develop @@ -35,6 +34,7 @@ Data ability providers can customize data access-related APIs such as data inser The following code snippet shows how to create a Data ability: ```javascript + import featureAbility from '@ohos.ability.featureAbility' import dataAbility from '@ohos.data.dataAbility' import dataRdb from '@ohos.data.rdb' @@ -46,7 +46,8 @@ Data ability providers can customize data access-related APIs such as data inser export default { onInitialized(abilityInfo) { console.info('DataAbility onInitialized, abilityInfo:' + abilityInfo.bundleName) - dataRdb.getRdbStore(STORE_CONFIG, 1, (err, store) => { + let context = featureAbility.getContext() + dataRdb.getRdbStore(context, STORE_CONFIG, 1, (err, store) => { console.info('DataAbility getRdbStore callback') store.executeSql(SQL_CREATE_TABLE, []) rdbStore = store diff --git a/en/application-dev/ability/fa-formability.md b/en/application-dev/ability/fa-formability.md index df433bbf7f7e9d9ff8c24ef389e965bc74ece74c..f9ecacae8a12703ec08de6bc0b2cf362cee716df 100644 --- a/en/application-dev/ability/fa-formability.md +++ b/en/application-dev/ability/fa-formability.md @@ -157,8 +157,8 @@ Configure the **config.json** file for the widget. | supportDimensions | Grid styles supported by the widget. Available values are as follows:
**1 * 2**: indicates a grid with one row and two columns.
**2 * 2**: indicates a grid with two rows and two columns.
**2 * 4**: indicates a grid with two rows and four columns.
**4 * 4**: indicates a grid with four rows and four columns.| String array| No | | defaultDimension | Default grid style of the widget. The value must be available in the **supportDimensions** array of the widget.| String | No | | updateEnabled | Whether the widget can be updated periodically. Available values are as follows:
**true**: The widget can be updated periodically, depending on the update way you select, either at a specified interval (**updateDuration**) or at the scheduled time (**scheduledUpdateTime**). **updateDuration** is preferentially recommended.
**false**: The widget cannot be updated periodically.| Boolean | No | - | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute. | String | Yes (initial value: **0:0**) | - | updateDuration | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.
If the value is **0**, this field does not take effect.
If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.| Number | Yes (initial value: **0**) | + | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute.
This parameter has a lower priority than **updateDuration**. If both are specified, the value specified by **updateDuration** is used.| String | Yes (initial value: **0:0**) | + | updateDuration | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.
If the value is **0**, this field does not take effect.
If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.
This parameter has a higher priority than **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used.| Number | Yes (initial value: **0**) | | formConfigAbility | Link to a specific page of the application. The value is a URI. | String | Yes (initial value: left empty) | | formVisibleNotify | Whether the widget is allowed to use the widget visibility notification. | String | Yes (initial value: left empty) | | jsComponentName | Component name of the widget. The value is a string with a maximum of 127 bytes. | String | No | @@ -189,7 +189,6 @@ Configure the **config.json** file for the widget. "scheduledUpdateTime": "10:30", "supportDimensions": ["2*2"], "type": "JS", - "updateDuration": 1, "updateEnabled": true }] }] @@ -208,7 +207,7 @@ Mostly, the widget provider is started only when it needs to obtain information let formName = want.parameters["ohos.extra.param.key.form_name"]; let tempFlag = want.parameters["ohos.extra.param.key.form_temporary"]; // Persistently store widget information for subsequent use, such as widget instance retrieval or update. - // The storeFormInfo API is not implemented here. For details about the implementation, see "FA Model Widget" provided in "Samples". + // The storeFormInfo API is not implemented here. storeFormInfo(formId, formName, tempFlag, want); let obj = { @@ -227,7 +226,7 @@ You should override **onDestroy** to delete widget data. console.log('FormAbility onDestroy'); // You need to implement the code for deleting the persistent widget instance. - // The deleteFormInfo API is not implemented here. For details, see "Widget Host" provided in "Samples". + // The deleteFormInfo API is not implemented here. deleteFormInfo(formId); } ``` @@ -336,7 +335,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme "actions": { "routerEvent": { "action": "router", - "abilityName": "com.example.MyApplication.hmservice.FormAbility", + "abilityName": "com.example.entry.MainAbility", "params": { "message": "add detail" } @@ -348,3 +347,58 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme Now you've got a widget shown below. ![fa-form-example](figures/fa-form-example.png) + +### Developing Widget Events + +You can set router and message events for components on a widget. The router event applies to ability redirection, and the message event applies to custom click events. The key steps are as follows: + +1. Set **onclick** in the HML file to **routerEvent** or **messageEvent**, depending on the **actions** settings in the JSON file. +2. For the router event, set the following attributes: + - **action**: **"router"**. + - **abilityName**: target ability name, for example, **com.example.entry.MainAbility**, which is the default main ability name in DevEco Studio for the FA model. + - **params**: custom parameters of the target ability. Set them as required. The value can be obtained from **parameters** in **want** used for starting the target ability. For example, in the lifecycle function **onCreate** of the main ability in the FA model, **featureAbility.getWant()** can be used to obtain **want** and its **parameters** field. +3. For the message event, set the following attributes: + - **action**: **"message"**. + - **params**: custom parameters of the message event. Set them as required. The value can be obtained from **message** in the widget lifecycle function **onEvent**. + +The code snippet is as follows: + + - In the HML file: + ```html +
+ +
+ +
+
+ {{title}} + {{detail}} +
+ +
+ ``` + + - In the JSON file: + ```json + { + "data": { + "title": "TitleDefault", + "detail": "TextDefault" + }, + "actions": { + "routerEvent": { + "action": "router", + "abilityName": "com.example.entry.MainAbility", + "params": { + "message": "add detail" + } + }, + "messageEvent": { + "action": "message", + "params": { + "message": "add detail" + } + } + } + } + ``` \ No newline at end of file diff --git a/en/application-dev/ability/stage-formextension.md b/en/application-dev/ability/stage-formextension.md index 5fa0f92eea67dc6b90a69c7ad32a9ec97a62b540..5cf0a4ba0aa14f3d47ea80c132a4e6f23784ba9f 100644 --- a/en/application-dev/ability/stage-formextension.md +++ b/en/application-dev/ability/stage-formextension.md @@ -49,10 +49,10 @@ The **FormExtension** class also has a member context, that is, the **FormExtens **Table 2** FormExtensionContext APIs -| API | Description | -| :----------------------------------------------------------- | :------------------------ | -| updateForm(formId: string, formBindingData: formBindingData.FormBindingData, callback: AsyncCallback\): void | Updates a widget. This API uses an asynchronous callback to return the result. | -| updateForm(formId: string, formBindingData: formBindingData.FormBindingData): Promise\ | Updates a widget. This API uses a promise to return the result.| +| API | Description | +| :----------------------------------------------------------- | :----------------------------------------------------------- | +| updateForm(formId: string, formBindingData: formBindingData.FormBindingData, callback: AsyncCallback\): void | Updates a widget. This API uses an asynchronous callback to return the result.| +| updateForm(formId: string, formBindingData: formBindingData.FormBindingData): Promise\ | Updates a widget. This API uses a promise to return the result.| For details about the **FormProvider** APIs, see [FormProvider](../reference/apis/js-apis-formprovider.md). @@ -86,7 +86,7 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo export default class FormAbility extends FormExtension { onCreate(want) { console.log('FormAbility onCreate'); - // Persistently store widget information for subsequent use, such as during widget instance retrieval or update. + // Persistently store widget information for subsequent use, such as widget instance retrieval or update. let obj = { "title": "titleOnCreate", "detail": "detailOnCreate" @@ -176,8 +176,8 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo | supportDimensions | Grid styles supported by the widget. Available values are as follows:
**1 * 2**: indicates a grid with one row and two columns.
**2 * 2**: indicates a grid with two rows and two columns.
**2 * 4**: indicates a grid with two rows and four columns.
**4 * 4**: indicates a grid with four rows and four columns.| String array| No | | defaultDimension | Default grid style of the widget. The value must be available in the **supportDimensions** array of the widget.| String | No | | updateEnabled | Whether the widget can be updated periodically. Available values are as follows:
**true**: The widget can be updated periodically, depending on the update way you select, either at a specified interval (**updateDuration**) or at the scheduled time (**scheduledUpdateTime**). **updateDuration** is recommended.
**false**: The widget cannot be updated periodically.| Boolean | No | - | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute. | String | Yes (initial value: **0:0**) | - | updateDuration | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.
If the value is **0**, this field does not take effect.
If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.| Number | Yes (initial value: **0**) | + | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute.
This parameter has a lower priority than **updateDuration**. If both are specified, the value specified by **updateDuration** is used.| String | Yes (initial value: **0:0**) | + | updateDuration | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.
If the value is **0**, this field does not take effect.
If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.
This parameter has a higher priority than **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used.| Number | Yes (initial value: **0**) | | formConfigAbility | Link to a specific page of the application. The value is a URI. | String | Yes (initial value: left empty) | | formVisibleNotify | Whether the widget is allowed to use the widget visibility notification. | String | Yes (initial value: left empty) | | metaData | Metadata of the widget. This field contains the array of the **customizeData** field. | Object | Yes (initial value: left empty) | @@ -200,7 +200,6 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo "defaultDimension": "2*2", "updateEnabled": true, "scheduledUpdateTime": "10:30", - "updateDuration": 1, "formConfigAbility": "ability://ohos.samples.FormApplication.MainAbility" }] } @@ -218,8 +217,8 @@ Mostly, the widget provider is started only when it needs to obtain information let formId = want.parameters["ohos.extra.param.key.form_identity"]; let formName = want.parameters["ohos.extra.param.key.form_name"]; let tempFlag = want.parameters["ohos.extra.param.key.form_temporary"]; - // Persistently store widget data for subsequent use, such as widget instance retrieval and update. - // The storeFormInfo API is not implemented here. For details about the implementation, see "Samples" below. + // Persistently store widget data for subsequent use, such as widget instance retrieval or update. + // The storeFormInfo API is not implemented here. storeFormInfo(formId, formName, tempFlag, want); let obj = { @@ -238,7 +237,7 @@ You should override **onDestroy** to delete widget data. console.log('FormAbility onDestroy'); // You need to implement the code for deleting the persistent widget data. - // The deleteFormInfo API is not implemented here. For details about the implementation, see "Samples" below. + // The deleteFormInfo API is not implemented here. deleteFormInfo(formId); } ``` @@ -277,10 +276,11 @@ onUpdate(formId) { You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programmed widget. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** +> > Currently, only the JavaScript-based web-like development paradigm can be used to develop the widget UI. - - hml: + - In the HML file: ```html
@@ -295,7 +295,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme
``` - - css: + - In the CSS file: ```css .container { @@ -336,7 +336,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme } ``` - - json: + - In the JSON file: ```json { "data": { @@ -346,7 +346,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme "actions": { "routerEvent": { "action": "router", - "abilityName": "com.example.MyApplication.hmservice.FormAbility", + "abilityName": "MainAbility", "params": { "message": "add detail" } @@ -358,3 +358,58 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme Now you've got a widget shown below. ![fa-form-example](figures/fa-form-example.png) + +### Developing Widget Events + +You can set router and message events for components on a widget. The router event applies to ability redirection, and the message event applies to custom click events. The key steps are as follows: + +1. Set **onclick** in the HML file to **routerEvent** or **messageEvent**, depending on the **actions** settings in the JSON file. +2. For the router event, set the following attributes: + - **action**: **"router"**. + - **abilityName**: target ability name, for example, **MainAbility**, which is the default main ability name in DevEco Studio for the stage model. + - **params**: custom parameters of the target ability. Set them as required. The value can be obtained from **parameters** in **want** used for starting the target ability. For example, in the lifecycle function **onCreate** of the main ability in the stage model, you can obtain **want** and its **parameters** field. +3. For the message event, set the following attributes: + - **action**: **"message"**. + - **params**: custom parameters of the message event. Set them as required. The value can be obtained from **message** in the widget lifecycle function **onEvent**. + +The following is an example: + + - In the HML file: + ```html +
+ +
+ +
+
+ {{title}} + {{detail}} +
+ +
+ ``` + + - In the JSON file: + ```json + { + "data": { + "title": "TitleDefault", + "detail": "TextDefault" + }, + "actions": { + "routerEvent": { + "action": "router", + "abilityName": "MainAbility", + "params": { + "message": "add detail" + } + }, + "messageEvent": { + "action": "message", + "params": { + "message": "add detail" + } + } + } + } + ``` \ No newline at end of file diff --git a/en/application-dev/reference/apis/js-apis-data-storage.md b/en/application-dev/reference/apis/js-apis-data-storage.md index 5f1daa3d0ca5b492e4c5c9b8ce057f3b46966451..724e8d767f52bf38a43530f57550eaf8825f7271 100644 --- a/en/application-dev/reference/apis/js-apis-data-storage.md +++ b/en/application-dev/reference/apis/js-apis-data-storage.md @@ -3,13 +3,10 @@ Lightweight storage provides applications with data processing capability and allows applications to perform lightweight data storage and query. Data is stored in key-value (KV) pairs. Keys are of the string type, and values can be of the number, string, or Boolean type. -> **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. -> -> - The APIs of this module are no longer maintained since API Version 9. You are advised to use [`@ohos.data.preferences`](js-apis-data-preferences.md). -> -> - The APIs of this module can be used only in the FA model. +> 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 diff --git a/en/application-dev/reference/apis/js-apis-i18n.md b/en/application-dev/reference/apis/js-apis-i18n.md index 06d2731b53f9e803be6cb72a60f63076f595c4f8..424273bb6749b2884edd63882135912715150b36 100644 --- a/en/application-dev/reference/apis/js-apis-i18n.md +++ b/en/application-dev/reference/apis/js-apis-i18n.md @@ -2,10 +2,10 @@ This module provides system-related or enhanced I18N capabilities, such as locale management, phone number formatting, and calendar, through supplementary I18N APIs that are not defined in ECMA 402. -The [Intl](intl-guidelines.md) module provides basic I18N capabilities through the standard I18N APIs defined in ECMA 402. It works with the I18N module to provide a complete suite of I18N capabilities. +The [Intl](js-apis-intl.md) module provides basic I18N capabilities through the standard I18N APIs defined in ECMA 402. It works with the I18N module to provide a complete suite of I18N capabilities. > **NOTE** -> +> > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. @@ -26,16 +26,16 @@ Obtains the localized script for the specified language. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------------ | ------- | ---- | ---------------- | -| language | string | Yes | Specified language. | -| locale | string | Yes | Locale ID. | -| sentenceCase | boolean | No | Whether to use sentence case for the localized script.| +| Name | Type | Mandatory | Description | +| ------------ | ------- | --------- | ---------------------------------------- | +| language | string | Yes | Specified language. | +| locale | string | Yes | Locale ID. | +| sentenceCase | boolean | No | Whether to use sentence case for the localized script. | **Return Value** -| Type | Description | -| ------ | ------------- | -| string | Localized script for the specified language.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | Localized script for the specified language. | **Example** ``` @@ -53,16 +53,16 @@ Obtains the localized script for the specified country. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------------ | ------- | ---- | ----------------------------- | -| country | string | Yes | Specified country. | -| locale | string | Yes | Locale ID. | -| sentenceCase | boolean | No | Whether to use sentence case for the localized script.| +| Name | Type | Mandatory | Description | +| ------------ | ------- | --------- | ---------------------------------------- | +| country | string | Yes | Specified country. | +| locale | string | Yes | Locale ID. | +| sentenceCase | boolean | No | Whether to use sentence case for the localized script. | **Return Value** -| Type | Description | -| ------ | ------------------------------------------ | -| string | Localized script for the specified country.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | Localized script for the specified country. | **Example** ``` @@ -85,9 +85,9 @@ Checks whether the localized script for the specified language is displayed from | locale | string | Locale ID. | **Return Value** -| Type | Description | +| Type | Description | | ------- | ---------------------------------------- | -| boolean | Returns **true** if the localized script is displayed from right to left; returns **false** otherwise.| +| boolean | Returns **true** if the localized script is displayed from right to left; returns **false** otherwise. | **Example** ``` @@ -105,9 +105,9 @@ Obtains the system language. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ------- | -| string | System language ID.| +| Type | Description | +| ------ | ------------------- | +| string | System language ID. | **Example** ``` @@ -130,14 +130,14 @@ Sets the system language. Currently, this API does not support real-time updatin **System API**: This is a system API and cannot be called by third-party applications. **Parameters** -| Name | Type | Description | -| -------- | ------ | ----- | -| language | string | Language ID.| +| Name | Type | Description | +| -------- | ------ | ------------ | +| language | string | Language ID. | **Return Value** -| Type | Description | -| ------- | ------------------------------------- | -| boolean | Returns **true** if the operation is successful; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | **Example** ``` @@ -156,9 +156,9 @@ Obtains the list of system languages. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------------------- | ------------ | -| Array<string> | List of the IDs of system languages.| +| Type | Description | +| ------------------- | ------------------------------------ | +| Array<string> | List of the IDs of system languages. | **Example** ``` @@ -177,14 +177,14 @@ Obtains the list of countries and regions supported for the specified language. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Description | -| -------- | ------ | ----- | -| language | string | Language ID.| +| Name | Type | Description | +| -------- | ------ | ------------ | +| language | string | Language ID. | **Return Value** -| Type | Description | -| ------------------- | ------------ | -| Array<string> | List of the IDs of the countries and regions supported for the specified language.| +| Type | Description | +| ------------------- | ---------------------------------------- | +| Array<string> | List of the IDs of the countries and regions supported for the specified language. | **Example** ``` @@ -201,9 +201,9 @@ Obtains the system region. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ------- | -| string | System region ID.| +| Type | Description | +| ------ | ----------------- | +| string | System region ID. | **Example** ``` @@ -224,14 +224,14 @@ Sets the system region. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Description | -| ------ | ------ | ----- | -| region | string | Region ID.| +| Name | Type | Description | +| ------ | ------ | ----------- | +| region | string | Region ID. | **Return Value** -| Type | Description | -| ------- | ------------------------------------- | -| boolean | Returns **true** if the operation is successful; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | **Example** ``` @@ -248,9 +248,9 @@ Obtains the system locale. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ------- | -| string | System locale ID.| +| Type | Description | +| ------ | ----------------- | +| string | System locale ID. | **Example** ``` @@ -271,14 +271,14 @@ Sets the system locale. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Description | -| ------ | ------ | --------------- | -| locale | string | System locale ID, for example, **zh-CN**.| +| Name | Type | Description | +| ------ | ------ | ---------------------------------------- | +| locale | string | System locale ID, for example, **zh-CN**. | **Return Value** -| Type | Description | +| Type | Description | | ------- | ---------------------------------------- | -| boolean | Returns **true** if the operation is successful; returns **false** otherwise.| +| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | **Example** ``` @@ -297,15 +297,15 @@ Checks whether the system language matches the specified region. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| -------- | ------ | ---- | ------------- | -| language | string | Yes | Valid language ID, for example, **zh**.| -| region | string | No | Valid region ID, for example, **CN**. | +| Name | Type | Mandatory | Description | +| -------- | ------ | --------- | --------------------------------------- | +| language | string | Yes | Valid language ID, for example, **zh**. | +| region | string | No | Valid region ID, for example, **CN**. | **Return Value** -| Type | Description | +| Type | Description | | ------- | ---------------------------------------- | -| boolean | Returns **true** if the system language matches the specified region; returns **false** otherwise.| +| boolean | Returns **true** if the system language matches the specified region; returns **false** otherwise. | **Example** ``` @@ -322,15 +322,15 @@ Obtains a **Calendar** object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ---------------------------------------- | -| locale | string | Yes | Valid locale value, for example, **zh-Hans-CN**. | -| type | string | No | Valid calendar type. Currently, the valid types are as follows: **buddhist**, **chinese**, **coptic**, **ethiopic**, **hebrew**, **gregory**, **indian**, **islamic\_civil**, **islamic\_tbla**, **islamic\_umalqura**, **japanese**, and **persian**. If this parameter is left unspecified, the default calendar type of the specified locale is used.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ---------------------------------------- | +| locale | string | Yes | Valid locale value, for example, **zh-Hans-CN**. | +| type | string | No | Valid calendar type. Currently, the valid types are as follows: **buddhist**, **chinese**, **coptic**, **ethiopic**, **hebrew**, **gregory**, **indian**, **islamic\_civil**, **islamic\_tbla**, **islamic\_umalqura**, **japanese**, and **persian**. If this parameter is left unspecified, the default calendar type of the specified locale is used. | **Return Value** -| Type | Description | -| ---------------------- | ----- | -| [Calendar](#calendar8) | **Calendar** object.| +| Type | Description | +| ---------------------- | -------------------- | +| [Calendar](#calendar8) | **Calendar** object. | **Example** ``` @@ -350,9 +350,9 @@ Sets the date for this **Calendar** object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ---- | ---- | ----------------- | -| date | Date | Yes | Date to be set for the **Calendar** object.| +| Name | Type | Mandatory | Description | +| ---- | ---- | --------- | ---------------------------------------- | +| date | Date | Yes | Date to be set for the **Calendar** object. | **Example** ``` @@ -371,9 +371,9 @@ Sets the date and time for this **Calendar** object. The value is represented by **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ---------------------------------------- | -| time | number | Yes | Number of milliseconds that have elapsed since the Unix epoch.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------------------------------- | +| time | number | Yes | Number of milliseconds that have elapsed since the Unix epoch. | **Example** ``` @@ -391,14 +391,14 @@ Sets the year, month, day, hour, minute, and second for this **Calendar** object **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ------ | -| year | number | Yes | Year to set. | -| month | number | Yes | Month to set. | -| date | number | Yes | Day to set. | -| hour | number | No | Hour to set.| -| minute | number | No | Minute to set.| -| second | number | No | Second to set. | +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | -------------- | +| year | number | Yes | Year to set. | +| month | number | Yes | Month to set. | +| date | number | Yes | Day to set. | +| hour | number | No | Hour to set. | +| minute | number | No | Minute to set. | +| second | number | No | Second to set. | **Example** ``` @@ -416,9 +416,9 @@ Sets the time zone of this **Calendar** object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| -------- | ------ | ---- | ------------------------- | -| timezone | string | Yes | Time zone, for example, **Asia/Shanghai**.| +| Name | Type | Mandatory | Description | +| -------- | ------ | --------- | ---------------------------------------- | +| timezone | string | Yes | Time zone, for example, **Asia/Shanghai**. | **Example** ``` @@ -436,9 +436,9 @@ Obtains the time zone of this **Calendar** object. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ---------- | -| string | Time zone of the **Calendar** object.| +| Type | Description | +| ------ | ------------------------------------- | +| string | Time zone of the **Calendar** object. | **Example** ``` @@ -457,9 +457,9 @@ Obtains the start day of a week for this **Calendar** object. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | --------------------- | -| number | Start day of a week. The value **1** indicates Sunday, and the value **7** indicates Saturday.| +| Type | Description | +| ------ | ---------------------------------------- | +| number | Start day of a week. The value **1** indicates Sunday, and the value **7** indicates Saturday. | **Example** ``` @@ -477,9 +477,9 @@ Sets the start day of a week for this **Calendar** object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ----- | ------ | ---- | --------------------- | -| value | number | No | Start day of a week. The value **1** indicates Sunday, and the value **7** indicates Saturday.| +| Name | Type | Mandatory | Description | +| ----- | ------ | --------- | ---------------------------------------- | +| value | number | No | Start day of a week. The value **1** indicates Sunday, and the value **7** indicates Saturday. | **Example** ``` @@ -497,9 +497,9 @@ Obtains the minimum number of days in the first week of a year. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ------------ | -| number | Minimum number of days in the first week of a year.| +| Type | Description | +| ------ | ---------------------------------------- | +| number | Minimum number of days in the first week of a year. | **Example** ``` @@ -517,9 +517,9 @@ Sets the minimum number of days in the first week of a year. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ----- | ------ | ---- | ------------ | -| value | number | No | Minimum number of days in the first week of a year.| +| Name | Type | Mandatory | Description | +| ----- | ------ | --------- | ---------------------------------------- | +| value | number | No | Minimum number of days in the first week of a year. | **Example** ``` @@ -537,14 +537,14 @@ Obtains the value of the specified field in the **Calendar** object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ----- | ------ | ---- | ---------------------------------------- | -| field | string | Yes | Value of the specified field in the **Calendar** object. Currently, a valid field can be any of the following: **era**, **year**, **month**, **week\_of\_year**, **week\_of\_month**, **date**, **day\_of\_year**, **day\_of\_week**, **day\_of\_week\_in\_month**, **hour**, **hour\_of\_day**, **minute**, **second**, **millisecond**, **zone\_offset**, **dst\_offset**, **year\_woy**, **dow\_local**, **extended\_year**, **julian\_day**, **milliseconds\_in\_day**, **is\_leap\_month**.| +| Name | Type | Mandatory | Description | +| ----- | ------ | --------- | ---------------------------------------- | +| field | string | Yes | Value of the specified field in the **Calendar** object. Currently, a valid field can be any of the following: **era**, **year**, **month**, **week\_of\_year**, **week\_of\_month**, **date**, **day\_of\_year**, **day\_of\_week**, **day\_of\_week\_in\_month**, **hour**, **hour\_of\_day**, **minute**, **second**, **millisecond**, **zone\_offset**, **dst\_offset**, **year\_woy**, **dow\_local**, **extended\_year**, **julian\_day**, **milliseconds\_in\_day**, **is\_leap\_month**. | **Return Value** -| Type | Description | +| Type | Description | | ------ | ---------------------------------------- | -| number | Value of the specified field. For example, if the year in the internal date of this **Calendar** object is **1990**, the **get("year")** function will return **1990**.| +| number | Value of the specified field. For example, if the year in the internal date of this **Calendar** object is **1990**, the **get("year")** function will return **1990**. | **Example** ``` @@ -563,14 +563,14 @@ Obtains the name of the **Calendar** object displayed for the specified locale. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ---------------------------------------- | -| locale | string | Yes | Locale for which the name of the **Calendar** object is displayed. For example, if **locale** is **en-US**, the name of the Buddhist calendar will be **Buddhist Calendar**.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ---------------------------------------- | +| locale | string | Yes | Locale for which the name of the **Calendar** object is displayed. For example, if **locale** is **en-US**, the name of the Buddhist calendar will be **Buddhist Calendar**. | **Return Value** -| Type | Description | -| ------ | ------------------- | -| string | Name of the **Calendar** object displayed for the specified locale.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | Name of the **Calendar** object displayed for the specified locale. | **Example** ``` @@ -588,14 +588,14 @@ Checks whether the specified date in this **Calendar** object is a weekend. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ---- | ---- | ---------------------------------------- | -| date | Date | No | Specified date in this **Calendar** object. If this parameter is left unspecified, the system checks whether the current date in the **Calendar** object is a weekend.| +| Name | Type | Mandatory | Description | +| ---- | ---- | --------- | ---------------------------------------- | +| date | Date | No | Specified date in this **Calendar** object. If this parameter is left unspecified, the system checks whether the current date in the **Calendar** object is a weekend. | **Return Value** -| Type | Description | -| ------- | ----------------------------------- | -| boolean | Returns **true** if the date is a weekend; returns **false** if the date is a weekday.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the date is a weekend; returns **false** if the date is a weekday. | **Example** ``` @@ -619,10 +619,10 @@ Creates a **PhoneNumberFormat** object. **System capability**: SystemCapability.Global.I18n Parameters -| Name | Type | Mandatory | Description | -| ------- | ---------------------------------------- | ---- | ---------------- | -| country | string | Yes | Country or region to which the phone number to be formatted belongs.| -| options | [PhoneNumberFormatOptions](#phonenumberformatoptions8) | No | Options of the **PhoneNumberFormat** object. | +| Name | Type | Mandatory | Description | +| ------- | ---------------------------------------- | --------- | ---------------------------------------- | +| country | string | Yes | Country or region to which the phone number to be formatted belongs. | +| options | [PhoneNumberFormatOptions](#phonenumberformatoptions8) | No | Options of the **PhoneNumberFormat** object. | **Example** ``` @@ -639,14 +639,14 @@ Checks whether the format of the specified phone number is valid. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | --------- | -| number | string | Yes | Phone number to be checked.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | --------------------------- | +| number | string | Yes | Phone number to be checked. | **Return Value** -| Type | Description | -| ------- | ------------------------------------- | -| boolean | Returns **true** if the phone number format is valid; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the phone number format is valid; returns **false** otherwise. | **Example** ``` @@ -664,14 +664,14 @@ Formats a phone number. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ---------- | -| number | string | Yes | Phone number to be formatted.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ----------------------------- | +| number | string | Yes | Phone number to be formatted. | **Return Value** -| Type | Description | -| ------ | ---------- | -| string | Formatted phone number.| +| Type | Description | +| ------ | ----------------------- | +| string | Formatted phone number. | **Example** ``` @@ -688,15 +688,15 @@ Obtains the home location of a phone number. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ---------- | -| number | string | Yes | Phone number.| -| locale | string | Yes | Locale ID.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ------------- | +| number | string | Yes | Phone number. | +| locale | string | Yes | Locale ID. | **Return value** -| Type | Description | -| ------ | ---------- | -| string | Home location of the phone number.| +| Type | Description | +| ------ | ---------------------------------- | +| string | Home location of the phone number. | **Example** ```js @@ -711,9 +711,9 @@ Defines the options for this PhoneNumberFormat object. **System capability**: SystemCapability.Global.I18n -| Name | Type | Readable | Writable | Description | -| ---- | ------ | ---- | ---- | ---------------------------------------- | -| type | string | Yes | Yes | Format type of a phone number. The value can be **E164**, **INTERNATIONAL**, **NATIONAL**, or **RFC3966**.| +| Name | Type | Readable | Writable | Description | +| ---- | ------ | -------- | -------- | ---------------------------------------- | +| type | string | Yes | Yes | Format type of a phone number. The value can be **E164**, **INTERNATIONAL**, **NATIONAL**, or **RFC3966**. | ## UnitInfo8+ @@ -722,10 +722,10 @@ Defines the measurement unit information. **System capability**: SystemCapability.Global.I18n -| Name | Type | Readable | Writable | Description | -| ------------- | ------ | ---- | ---- | ---------------------------------------- | -| unit | string | Yes | Yes | Name of the measurement unit, for example, **meter**, **inch**, or **cup**.| -| measureSystem | string | Yes | Yes | Measurement system. The value can be **SI**, **US**, or **UK**.| +| Name | Type | Readable | Writable | Description | +| ------------- | ------ | -------- | -------- | ---------------------------------------- | +| unit | string | Yes | Yes | Name of the measurement unit, for example, **meter**, **inch**, or **cup**. | +| measureSystem | string | Yes | Yes | Measurement system. The value can be **SI**, **US**, or **UK**. | ## Util8+ @@ -740,18 +740,18 @@ Converts one measurement unit into another and formats the unit based on the spe **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| -------- | ---------------------- | ---- | ---------------------------------------- | -| fromUnit | [UnitInfo](#unitinfo8) | Yes | Measurement unit to be converted. | -| toUnit | [UnitInfo](#unitinfo8) | Yes | Measurement unit to be converted to. | -| value | number | Yes | Value of the measurement unit to be converted. | -| locale | string | Yes | Locale used for formatting, for example, **zh-Hans-CN**. | -| style | string | No | Style used for formatting. The value can be **long**, **short**, or **medium**.| +| Name | Type | Mandatory | Description | +| -------- | ---------------------- | --------- | ---------------------------------------- | +| fromUnit | [UnitInfo](#unitinfo8) | Yes | Measurement unit to be converted. | +| toUnit | [UnitInfo](#unitinfo8) | Yes | Measurement unit to be converted to. | +| value | number | Yes | Value of the measurement unit to be converted. | +| locale | string | Yes | Locale used for formatting, for example, **zh-Hans-CN**. | +| style | string | No | Style used for formatting. The value can be **long**, **short**, or **medium**. | **Return Value** -| Type | Description | -| ------ | ----------------------- | -| string | Character string obtained after formatting based on the measurement unit specified by **toUnit**.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | Character string obtained after formatting based on the measurement unit specified by **toUnit**. | **Example** ``` @@ -767,14 +767,14 @@ Obtains the sequence of the year, month, and day in the specified locale. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| -------- | ---------------------- | ---- | ---------------------------------------- | -| locale | string | Yes | Locale used for formatting, for example, **zh-Hans-CN**. | +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ---------------------------------------- | +| locale | string | Yes | Locale used for formatting, for example, **zh-Hans-CN**. | **Return value** -| Type | Description | -| ------ | ----------------------- | -| string | Sequence of the year, month, and day.| +| Type | Description | +| ------ | ------------------------------------- | +| string | Sequence of the year, month, and day. | **Example** ``` @@ -790,14 +790,14 @@ Creates an **IndexUtil** object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ---------------------------- | -| locale | string | No | A string containing locale information, including the language, optional script, and region.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ---------------------------------------- | +| locale | string | No | A string containing locale information, including the language, optional script, and region. | **Return Value** -| Type | Description | -| ------------------------ | --------------------- | -| [IndexUtil](#indexutil8) | **IndexUtil** object mapping to the specified locale.| +| Type | Description | +| ------------------------ | ---------------------------------------- | +| [IndexUtil](#indexutil8) | **IndexUtil** object mapping to the specified locale. | **Example** ``` @@ -817,9 +817,9 @@ Obtains the index list for this **locale** object. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------------------- | ------------------ | -| Array<string> | Index list for this **locale** object.| +| Type | Description | +| ------------------- | -------------------------------------- | +| Array<string> | Index list for this **locale** object. | **Example** ``` @@ -837,9 +837,9 @@ Adds the index of the new **locale** object to the index list. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ---------------------------- | -| locale | string | Yes | A string containing locale information, including the language, optional script, and region.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ---------------------------------------- | +| locale | string | Yes | A string containing locale information, including the language, optional script, and region. | **Example** ``` @@ -857,14 +857,14 @@ Obtains the index of a text object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ------------ | -| text | string | Yes | **text** object whose index is to be obtained.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------------------------------- | +| text | string | Yes | **text** object whose index is to be obtained. | **Return Value** -| Type | Description | -| ------ | ----------- | -| string | Index of the **text** object.| +| Type | Description | +| ------ | ----------------------------- | +| string | Index of the **text** object. | **Example** ``` @@ -885,14 +885,14 @@ Checks whether the input character string is composed of digits. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ----- | -| char | string | Yes | Input character.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------- | +| char | string | Yes | Input character. | **Return Value** -| Type | Description | -| ------- | ------------------------------------ | -| boolean | Returns **true** if the input character is a digit; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the input character is a digit; returns **false** otherwise. | **Example** ``` @@ -909,14 +909,14 @@ Checks whether the input character is a space. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ----- | -| char | string | Yes | Input character.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------- | +| char | string | Yes | Input character. | **Return Value** -| Type | Description | -| ------- | -------------------------------------- | -| boolean | Returns **true** if the input character is a space; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the input character is a space; returns **false** otherwise. | **Example** ``` @@ -933,14 +933,14 @@ Checks whether the input character is a white space. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ----- | -| char | string | Yes | Input character.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------- | +| char | string | Yes | Input character. | **Return Value** -| Type | Description | -| ------- | -------------------------------------- | -| boolean | Returns **true** if the input character is a white space; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the input character is a white space; returns **false** otherwise. | **Example** ``` @@ -957,14 +957,14 @@ Checks whether the input character is of the right to left (RTL) language. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ----- | -| char | string | Yes | Input character.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------- | +| char | string | Yes | Input character. | **Return Value** -| Type | Description | +| Type | Description | | ------- | ---------------------------------------- | -| boolean | Returns **true** if the input character is of the RTL language; returns **false** otherwise.| +| boolean | Returns **true** if the input character is of the RTL language; returns **false** otherwise. | **Example** ``` @@ -981,14 +981,14 @@ Checks whether the input character is an ideographic character. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ----- | -| char | string | Yes | Input character.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------- | +| char | string | Yes | Input character. | **Return Value** -| Type | Description | +| Type | Description | | ------- | ---------------------------------------- | -| boolean | Returns **true** if the input character is an ideographic character; returns **false** otherwise.| +| boolean | Returns **true** if the input character is an ideographic character; returns **false** otherwise. | **Example** ``` @@ -1005,14 +1005,14 @@ Checks whether the input character is a letter. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ----- | -| char | string | Yes | Input character.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------- | +| char | string | Yes | Input character. | **Return Value** -| Type | Description | -| ------- | ------------------------------------ | -| boolean | Returns **true** if the input character is a letter; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the input character is a letter; returns **false** otherwise. | **Example** ``` @@ -1029,14 +1029,14 @@ Checks whether the input character is a lowercase letter. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ----- | -| char | string | Yes | Input character.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------- | +| char | string | Yes | Input character. | **Return Value** -| Type | Description | +| Type | Description | | ------- | ---------------------------------------- | -| boolean | Returns **true** if the input character is a lowercase letter; returns **false** otherwise.| +| boolean | Returns **true** if the input character is a lowercase letter; returns **false** otherwise. | **Example** ``` @@ -1053,14 +1053,14 @@ Checks whether the input character is an uppercase letter. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ----- | -| char | string | Yes | Input character.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------- | +| char | string | Yes | Input character. | **Return Value** -| Type | Description | +| Type | Description | | ------- | ---------------------------------------- | -| boolean | Returns **true** if the input character is an uppercase letter; returns **false** otherwise.| +| boolean | Returns **true** if the input character is an uppercase letter; returns **false** otherwise. | **Example** ``` @@ -1077,14 +1077,14 @@ Obtains the type of the input character string. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ----- | -| char | string | Yes | Input character.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------- | +| char | string | Yes | Input character. | **Return Value** -| Type | Description | -| ------ | ----------- | -| string | Type of the input character.| +| Type | Description | +| ------ | ---------------------------- | +| string | Type of the input character. | **Example** ``` @@ -1101,14 +1101,14 @@ Obtains a [BreakIterator](#breakiterator8) object for text segmentation. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ---------------------------------------- | -| locale | string | Yes | Valid locale value, for example, **zh-Hans-CN**. The [BreakIterator](#breakiterator8) object segments text according to the rules of the specified locale.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ---------------------------------------- | +| locale | string | Yes | Valid locale value, for example, **zh-Hans-CN**. The [BreakIterator](#breakiterator8) object segments text according to the rules of the specified locale. | **Return Value** -| Type | Description | -| -------------------------------- | ----------- | -| [BreakIterator](#breakiterator8) | [BreakIterator](#breakiterator8) object used for text segmentation.| +| Type | Description | +| -------------------------------- | ---------------------------------------- | +| [BreakIterator](#breakiterator8) | [BreakIterator](#breakiterator8) object used for text segmentation. | **Example** ``` @@ -1128,9 +1128,9 @@ Sets the text to be processed by the [BreakIterator](#breakiterator8) object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ----------------------- | -| text | string | Yes | Text to be processed by the **BreakIterator** object.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------------------------------- | +| text | string | Yes | Text to be processed by the **BreakIterator** object. | **Example** ``` @@ -1148,9 +1148,9 @@ Obtains the text being processed by the [BreakIterator](#breakiterator8) object. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ---------------------- | -| string | Text being processed by the **BreakIterator** object.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | Text being processed by the **BreakIterator** object. | **Example** ``` @@ -1169,9 +1169,9 @@ Obtains the position of the [BreakIterator](#breakiterator8) object in the text **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | --------------------------- | -| number | Position of the **BreakIterator** object in the text being processed.| +| Type | Description | +| ------ | ---------------------------------------- | +| number | Position of the **BreakIterator** object in the text being processed. | **Example** ``` @@ -1190,9 +1190,9 @@ Puts the [BreakIterator](#breakiterator8) object to the first text boundary, whi **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ----------------- | -| number | Offset to the first text boundary of the processed text.| +| Type | Description | +| ------ | ---------------------------------------- | +| number | Offset to the first text boundary of the processed text. | **Example** ``` @@ -1211,9 +1211,9 @@ Puts the [BreakIterator](#breakiterator8) object to the last text boundary, whic **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ------------------ | -| number | Offset of the last text boundary of the processed text.| +| Type | Description | +| ------ | ---------------------------------------- | +| number | Offset of the last text boundary of the processed text. | **Example** ``` @@ -1232,14 +1232,14 @@ Moves the [BreakIterator](#breakiterator8) object backward by the specified numb **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ----- | ------ | ---- | ---------------------------------------- | -| index | number | No | Number of text boundaries by which the [BreakIterator](#breakiterator8) object is moved. A positive value indicates that the text boundary is moved backward, and a negative value indicates the opposite. If no index is specified, the index will be treated as **1**.| +| Name | Type | Mandatory | Description | +| ----- | ------ | --------- | ---------------------------------------- | +| index | number | No | Number of text boundaries by which the [BreakIterator](#breakiterator8) object is moved. A positive value indicates that the text boundary is moved backward, and a negative value indicates the opposite. If no index is specified, the index will be treated as **1**. | **Return Value** -| Type | Description | +| Type | Description | | ------ | ---------------------------------------- | -| number | Position of the [BreakIterator](#breakiterator8) object in the text after it is moved by the specified number of text boundaries. The value **-1** is returned if the position of the [BreakIterator](#breakiterator8) object is outside of the processed text after it is moved by the specified number of text boundaries.| +| number | Position of the [BreakIterator](#breakiterator8) object in the text after it is moved by the specified number of text boundaries. The value **-1** is returned if the position of the [BreakIterator](#breakiterator8) object is outside of the processed text after it is moved by the specified number of text boundaries. | **Example** ``` @@ -1260,9 +1260,9 @@ Moves the [BreakIterator](#breakiterator8) object to the previous text boundary. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | +| Type | Description | | ------ | ---------------------------------------- | -| number | Position of the [BreakIterator](#breakiterator8) object in the text after it is moved to the previous text boundary. The value **-1** is returned if the position of the [BreakIterator](#breakiterator8) object is outside of the processed text after it is moved by the specified number of text boundaries.| +| number | Position of the [BreakIterator](#breakiterator8) object in the text after it is moved to the previous text boundary. The value **-1** is returned if the position of the [BreakIterator](#breakiterator8) object is outside of the processed text after it is moved by the specified number of text boundaries. | **Example** ``` @@ -1283,14 +1283,14 @@ Moves the [BreakIterator](#breakiterator8) object to the text boundary after the **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ---------------------------------------- | -| offset | number | Yes | Offset to the position before the text boundary to which the [BreakIterator](#breakiterator8) object is moved.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ---------------------------------------- | +| offset | number | Yes | Offset to the position before the text boundary to which the [BreakIterator](#breakiterator8) object is moved. | **Return Value** -| Type | Description | +| Type | Description | | ------ | ---------------------------------------- | -| number | The value **-1** is returned if the text boundary to which the [BreakIterator](#breakiterator8) object is moved is outside of the processed text.| +| number | The value **-1** is returned if the text boundary to which the [BreakIterator](#breakiterator8) object is moved is outside of the processed text. | **Example** ``` @@ -1311,14 +1311,14 @@ Checks whether the position specified by the offset is a text boundary. If **tru **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ----------- | -| offset | number | Yes | Position to check.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ------------------ | +| offset | number | Yes | Position to check. | **Return Value** -| Type | Description | -| ------- | ------------------------------- | -| boolean | Returns **true** if the position specified by the offset is a text boundary; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the position specified by the offset is a text boundary; returns **false** otherwise. | **Example** ``` @@ -1338,9 +1338,9 @@ Checks whether the 24-hour clock is used. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | +| Type | Description | | ------- | ---------------------------------------- | -| boolean | Returns **true** if the 24-hour clock is used; returns **false** otherwise.| +| boolean | Returns **true** if the 24-hour clock is used; returns **false** otherwise. | **Example** ``` @@ -1359,14 +1359,14 @@ Sets the 24-hour clock. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------- | ---- | ---------------------------------------- | -| option | boolean | Yes | Whether to enable the 24-hour clock. The value **true** means to enable the 24-hour clock, and the value **false** means the opposite.| +| Name | Type | Mandatory | Description | +| ------ | ------- | --------- | ---------------------------------------- | +| option | boolean | Yes | Whether to enable the 24-hour clock. The value **true** means to enable the 24-hour clock, and the value **false** means the opposite. | **Return Value** -| Type | Description | -| ------- | ----------------------------- | -| boolean | Returns **true** if the 24-hour clock is enabled; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the 24-hour clock is enabled; returns **false** otherwise. | **Example** ``` @@ -1386,15 +1386,15 @@ Adds a preferred language to the specified position on the preferred language li **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| -------- | ------ | ---- | ---------- | -| language | string | Yes | Preferred language to add. | -| index | number | No | Position to which the preferred language is added.| +| Name | Type | Mandatory | Description | +| -------- | ------ | --------- | ---------------------------------------- | +| language | string | Yes | Preferred language to add. | +| index | number | No | Position to which the preferred language is added. | **Return Value** -| Type | Description | -| ------- | ----------------------------- | -| boolean | Returns **true** if the preferred language is successfully added; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the preferred language is successfully added; returns **false** otherwise. | **Example** ``` @@ -1416,14 +1416,14 @@ Deletes a preferred language from the specified position on the preferred langua **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ----- | ------ | ---- | --------------------- | -| index | number | Yes | Position of the preferred language to delete.| +| Name | Type | Mandatory | Description | +| ----- | ------ | --------- | ---------------------------------------- | +| index | number | Yes | Position of the preferred language to delete. | **Return Value** -| Type | Description | -| ------- | ----------------------------- | -| boolean | Returns **true** if the preferred language is deleted; returns **false** otherwise.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if the preferred language is deleted; returns **false** otherwise. | **Example** ``` @@ -1442,9 +1442,9 @@ Obtains the list of preferred languages. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------------------- | --------- | -| Array<string> | List of preferred languages.| +| Type | Description | +| ------------------- | ---------------------------- | +| Array<string> | List of preferred languages. | **Example** ``` @@ -1461,9 +1461,9 @@ Obtains the first language in the preferred language list. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | -------------- | -| string | First language in the preferred language list.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | First language in the preferred language list. | **Example** ``` @@ -1480,14 +1480,14 @@ Obtains the **TimeZone** object corresponding to the specified time zone ID. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ----- | -| zondID | string | No | Time zone ID.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ------------- | +| zondID | string | No | Time zone ID. | **Return Value** -| Type | Description | -| -------- | ------------ | -| TimeZone | **TimeZone** object corresponding to the time zone ID.| +| Type | Description | +| -------- | ---------------------------------------- | +| TimeZone | **TimeZone** object corresponding to the time zone ID. | **Example** ``` @@ -1507,9 +1507,9 @@ Obtains the ID of the specified **TimeZone** object. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ------------ | -| string | Time zone ID corresponding to the **TimeZone** object.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | Time zone ID corresponding to the **TimeZone** object. | **Example** ``` @@ -1527,15 +1527,15 @@ Obtains the representation of a **TimeZone** object in the specified locale. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------- | ---- | -------------------- | -| locale | string | No | System locale ID. | -| isDST | boolean | No | Whether to consider DST when obtaining the representation of the **TimeZone** object.| +| Name | Type | Mandatory | Description | +| ------ | ------- | --------- | ---------------------------------------- | +| locale | string | No | System locale ID. | +| isDST | boolean | No | Whether to consider DST when obtaining the representation of the **TimeZone** object. | **Return Value** -| Type | Description | -| ------ | ------------- | -| string | Representation of the **TimeZone** object in the specified locale.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | Representation of the **TimeZone** object in the specified locale. | **Example** ``` @@ -1553,9 +1553,9 @@ Obtains the offset between the time zone represented by a **TimeZone** object an **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ------------------- | -| number | Offset between the time zone represented by the **TimeZone** object and the UTC time zone.| +| Type | Description | +| ------ | ---------------------------------------- | +| number | Offset between the time zone represented by the **TimeZone** object and the UTC time zone. | **Example** ``` @@ -1573,9 +1573,9 @@ Obtains the offset between the time zone represented by a **TimeZone** object an **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ----------------------- | -| number | Offset between the time zone represented by the **TimeZone** object and the UTC time zone at a certain time point.| +| Type | Description | +| ------ | ---------------------------------------- | +| number | Offset between the time zone represented by the **TimeZone** object and the UTC time zone at a certain time point. | **Example** ``` @@ -1592,9 +1592,9 @@ Obtains the list of time zone IDs supported by the system. **System capability**: SystemCapability.Global.I18n **Return value** -| Type | Description | -| ------------------- | ----------- | -| Array<string> | List of time zone IDs supported by the system.| +| Type | Description | +| ------------------- | ---------------------------------------- | +| Array<string> | List of time zone IDs supported by the system. | **Example** ```ts @@ -1611,9 +1611,9 @@ Obtains the list of time zone city IDs supported by the system. **System capability**: SystemCapability.Global.I18n **Return value** -| Type | Description | -| ------------------- | ------------- | -| Array<string> | List of time zone city IDs supported by the system.| +| Type | Description | +| ------------------- | ---------------------------------------- | +| Array<string> | List of time zone city IDs supported by the system. | **Example** ```ts @@ -1630,15 +1630,15 @@ Obtains the localized display of a time zone city in the specified locale. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ------ | -| cityID | string | Yes | Time zone city ID.| -| locale | string | Yes | Locale ID. | +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ------------------ | +| cityID | string | Yes | Time zone city ID. | +| locale | string | Yes | Locale ID. | **Return value** -| Type | Description | -| ------ | ------------------ | -| string | Localized display of the time zone city in the specified locale.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | Localized display of the time zone city in the specified locale. | **Example** ```ts @@ -1655,14 +1655,14 @@ Obtains the **TimeZone** object corresponding to the specified time zone city ID **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ------ | -| cityID | string | Yes | Time zone city ID.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ------------------ | +| cityID | string | Yes | Time zone city ID. | **Return value** -| Type | Description | -| -------- | ----------- | -| TimeZone | **TimeZone** object corresponding to the specified time zone city ID.| +| Type | Description | +| -------- | ---------------------------------------- | +| TimeZone | **TimeZone** object corresponding to the specified time zone city ID. | **Example** ```ts @@ -1683,14 +1683,14 @@ This is a system API. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------- | ---- | ------------------------------- | -| flag | boolean | Yes | Whether to turn on the local digit switch. The value **true** means to turn on the local digit switch, and the value **false** indicates the opposite.| +| Name | Type | Mandatory | Description | +| ---- | ------- | --------- | ---------------------------------------- | +| flag | boolean | Yes | Whether to turn on the local digit switch. The value **true** means to turn on the local digit switch, and the value **false** indicates the opposite. | **Return value** -| Type | Description | -| ------- | ----------------------------------- | -| boolean | Result indicating whether the local digit switch is successfully set. The value **true** indicates that the local digit switch is successfully set, and the value **false** indicates the opposite.| +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Result indicating whether the local digit switch is successfully set. The value **true** indicates that the local digit switch is successfully set, and the value **false** indicates the opposite. | **Example** ```ts @@ -1707,9 +1707,9 @@ Checks whether the local digit switch is turned on. **System capability**: SystemCapability.Global.I18n **Return value** -| Type | Description | +| Type | Description | | ------- | ---------------------------------------- | -| boolean | Result indicating whether the local digit switch is turned on. The value **true** indicates that the local digit switch is turned on, and the value **false** indicates the opposite.| +| boolean | Result indicating whether the local digit switch is turned on. The value **true** indicates that the local digit switch is turned on, and the value **false** indicates the opposite. | **Example** ```ts @@ -1729,9 +1729,9 @@ Obtains a list of IDs supported by the **Transliterator** object. **System capability**: SystemCapability.Global.I18n **Return value** -| Type | Description | -| -------- | ---------- | -| string[] | List of IDs supported by the **Transliterator** object.| +| Type | Description | +| -------- | ---------------------------------------- | +| string[] | List of IDs supported by the **Transliterator** object. | **Example** ```ts @@ -1748,14 +1748,14 @@ Creates a **Transliterator** object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | -------- | -| id | string | Yes | ID supported by the **Transliterator** object.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------------------------------- | +| id | string | Yes | ID supported by the **Transliterator** object. | **Return value** -| Type | Description | -| ---------------------------------- | ----- | -| [Transliterator](#transliterator9) | **Transliterator** object.| +| Type | Description | +| ---------------------------------- | -------------------------- | +| [Transliterator](#transliterator9) | **Transliterator** object. | **Example** ```ts @@ -1772,14 +1772,14 @@ Converts the input string from the source format to the target format. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ------ | -| text | string | Yes | Input string.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ------------- | +| text | string | Yes | Input string. | **Return value** -| Type | Description | -| ------ | -------- | -| string | Target string.| +| Type | Description | +| ------ | -------------- | +| string | Target string. | **Example** ```ts diff --git a/en/application-dev/reference/apis/js-apis-intl.md b/en/application-dev/reference/apis/js-apis-intl.md index b335be1b5cf4826da51120cd2156a64a7cd55bff..f031c80ed8130305078ad3acb7d1801568b56199 100644 --- a/en/application-dev/reference/apis/js-apis-intl.md +++ b/en/application-dev/reference/apis/js-apis-intl.md @@ -2,10 +2,10 @@ This module provides basic I18N capabilities, such as time and date formatting, number formatting, and string sorting, through the standard I18N APIs defined in ECMA 402. -The [I18N](i18n-guidelines.md) module provides enhanced I18N capabilities through supplementary APIs that are not defined in ECMA 402. It works with the Intl module to provide a complete suite of I18N capabilities. +The [I18N](js-apis-i18n.md) module provides enhanced I18N capabilities through supplementary APIs that are not defined in ECMA 402. It works with the Intl module to provide a complete suite of I18N capabilities. > **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. @@ -23,18 +23,18 @@ import Intl from '@ohos.intl'; **System capability**: SystemCapability.Global.I18n -| Name | Type | Readable | Writable | Description | -| --------------- | ------- | ---- | ---- | ---------------------------------------- | -| language | string | Yes | No | Language associated with the locale, for example, **zh**. | -| script | string | Yes | No | Script type of the language, for example, **Hans**. | -| region | string | Yes | No | Region associated with the locale, for example, **CN**. | -| baseName | string | Yes | No | Basic key information about the locale, which consists of the language, script, and region, for example, **zh-Hans-CN**. | -| caseFirst | string | Yes | No | Whether case is taken into account for the locale's collation rules. The value can be **upper**, **lower**, or **false**.| -| calendar | string | Yes | No | Calendar for the locale. The value can be any of the following: **buddhist**, **chinese**, **coptic**, **dangi**, **ethioaa**, **ethiopic**, **gregory**, **hebrew**, **indian**, **islamic**, **islamic-umalqura**, **islamic-tbla**, **islamic-civil**, **islamic-rgsa**, **iso8601**, **japanese**, **persian**, **roc**, **islamicc**.| -| collation | string | Yes | No | Rule for sorting regions. The value can be any of the following: **big5han**, **compat**, **dict**, **direct**, **ducet**, **eor**, **gb2312**, **phonebk**, **phonetic**, **pinyin**, **reformed**, **searchjl**, **stroke**, **trad**, **unihan**, **zhuyin**.| -| hourCycle | string | Yes | No | Time system for the locale. The value can be any of the following: **h12**, **h23**, **h11**, **h24**.| -| numberingSystem | string | Yes | No | Numbering system for the locale. The value can be any of the following: **adlm**, **ahom**, **arab**, **arabext**, **bali**, **beng**, **bhks**, **brah**, **cakm**, **cham**, **deva**, **diak**, **fullwide**, **gong**, **gonm**, **gujr**, **guru**, **hanidec**, **hmng**, **hmnp**, **java**, **kali**, **khmr**, **knda**, **lana**, **lanatham**, **laoo**, **latn**, **lepc**, **limb**, **mathbold**, **mathdbl**, **mathmono**, **mathsanb**, **mathsans**, **mlym**, **modi**, **mong**, **mroo**, **mtei**, **mymr**, **mymrshan**, **mymrtlng**, **newa**, **nkoo**, **olck**, **orya**, **osma**, **rohg**, **saur**, **segment**, **shrd**, **sind**, **sinh**, **sora**, **sund**, **takr**, **talu**, **tamldec**, **telu**, **thai**, **tibt**, **tirh**, **vaii**, **wara**, **wcho**.| -| numeric | boolean | Yes | No | Whether to apply special collation rules for numeric characters. | +| Name | Type | Readable | Writable | Description | +| --------------- | ------- | -------- | -------- | ---------------------------------------- | +| language | string | Yes | No | Language associated with the locale, for example, **zh**. | +| script | string | Yes | No | Script type of the language, for example, **Hans**. | +| region | string | Yes | No | Region associated with the locale, for example, **CN**. | +| baseName | string | Yes | No | Basic key information about the locale, which consists of the language, script, and region, for example, **zh-Hans-CN**. | +| caseFirst | string | Yes | No | Whether case is taken into account for the locale's collation rules. The value can be **upper**, **lower**, or **false**. | +| calendar | string | Yes | No | Calendar for the locale. The value can be any of the following: **buddhist**, **chinese**, **coptic**, **dangi**, **ethioaa**, **ethiopic**, **gregory**, **hebrew**, **indian**, **islamic**, **islamic-umalqura**, **islamic-tbla**, **islamic-civil**, **islamic-rgsa**, **iso8601**, **japanese**, **persian**, **roc**, **islamicc**. | +| collation | string | Yes | No | Rule for sorting regions. The value can be any of the following: **big5han**, **compat**, **dict**, **direct**, **ducet**, **eor**, **gb2312**, **phonebk**, **phonetic**, **pinyin**, **reformed**, **searchjl**, **stroke**, **trad**, **unihan**, **zhuyin**. | +| hourCycle | string | Yes | No | Time system for the locale. The value can be any of the following: **h12**, **h23**, **h11**, **h24**. | +| numberingSystem | string | Yes | No | Numbering system for the locale. The value can be any of the following: **adlm**, **ahom**, **arab**, **arabext**, **bali**, **beng**, **bhks**, **brah**, **cakm**, **cham**, **deva**, **diak**, **fullwide**, **gong**, **gonm**, **gujr**, **guru**, **hanidec**, **hmng**, **hmnp**, **java**, **kali**, **khmr**, **knda**, **lana**, **lanatham**, **laoo**, **latn**, **lepc**, **limb**, **mathbold**, **mathdbl**, **mathmono**, **mathsanb**, **mathsans**, **mlym**, **modi**, **mong**, **mroo**, **mtei**, **mymr**, **mymrshan**, **mymrtlng**, **newa**, **nkoo**, **olck**, **orya**, **osma**, **rohg**, **saur**, **segment**, **shrd**, **sind**, **sinh**, **sora**, **sund**, **takr**, **talu**, **tamldec**, **telu**, **thai**, **tibt**, **tirh**, **vaii**, **wara**, **wcho**. | +| numeric | boolean | Yes | No | Whether to apply special collation rules for numeric characters. | ### constructor8+ @@ -60,10 +60,10 @@ Creates a Locale object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------- | ------------- | ---- | ---------------------------- | -| locale | string | Yes | A string containing locale information, including the language, optional script, and region.| -| options | LocaleOptions | No | Options for creating the **Locale** object. | +| Name | Type | Mandatory | Description | +| ------- | ------------- | --------- | ---------------------------------------- | +| locale | string | Yes | A string containing locale information, including the language, optional script, and region. | +| options | LocaleOptions | No | Options for creating the **Locale** object. | **Example** ```js @@ -80,9 +80,9 @@ Converts locale information to a string. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------ | ----------- | -| string | String containing locale information.| +| Type | Description | +| ------ | ------------------------------------- | +| string | String containing locale information. | **Example** ```js @@ -100,9 +100,9 @@ Maximizes information of the **Locale** object. If the script and locale informa **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ----------------- | ---------- | -| [Locale](#locale) | **Locale** object with the maximized information.| +| Type | Description | +| ----------------- | ---------------------------------------- | +| [Locale](#locale) | **Locale** object with the maximized information. | **Example** ```js @@ -120,9 +120,9 @@ Minimizes information of the **Locale** object. If the script and locale informa **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ----------------- | ---------- | -| [Locale](#locale) | **Locale** object with the minimized information.| +| Type | Description | +| ----------------- | ---------------------------------------- | +| [Locale](#locale) | **Locale** object with the minimized information. | **Example** ```js @@ -137,14 +137,14 @@ Represents the locale options. **System capability**: SystemCapability.Global.I18n -| Name | Type | Readable | Writable | Description | -| --------------- | ------- | ---- | ---- | ---------------------------------------- | -| calendar | string | Yes | Yes | Calendar for the locale. The calue can be any of the following: **buddhist**, **chinese**, **coptic**, **dangi**, **ethioaa**, **ethiopic**, **gregory**, **hebrew**, **indian**, **islamic**, **islamic-umalqura**, **islamic-tbla**, **islamic-civil**, **islamic-rgsa**, **iso8601**, **japanese**, **persian**, **roc**, **islamicc**.| -| collation | string | Yes | Yes | Collation rule. The value can be any of the following: **big5han**, **compat**, **dict**, **direct**, **ducet**, **emoji**, **eor**, **gb2312**, **phonebk**, **phonetic**, **pinyin**, **reformed**,**search**, **searchjl**, **standard**, **stroke**, **trad**, **unihan**, **zhuyin**.| -| hourCycle | string | Yes | Yes | Time system for the locale. The value can be any of the following: **h11**, **h12**, **h23**, **h24**.| -| numberingSystem | string | Yes | Yes | Numbering system for the locale. The value can be any of the following: **adlm**, **ahom**, **arab**, **arabext**, **bali**, **beng**, **bhks**, **brah**, **cakm**, **cham**, **deva**, **diak**, **fullwide**, **gong**, **gonm**, **gujr**, **guru**, **hanidec**, **hmng**, **hmnp**, **java**, **kali**, **khmr**, **knda**, **lana**, **lanatham**, **laoo**, **latn**, **lepc**, **limb**, **mathbold**, **mathdbl**, **mathmono**, **mathsanb**, **mathsans**, **mlym**, **modi**, **mong**, **mroo**, **mtei**, **mymr**, **mymrshan**, **mymrtlng**, **newa**, **nkoo**, **olck**, **orya**, **osma**, **rohg**, **saur**, **segment**, **shrd**, **sind**, **sinh**, **sora**, **sund**, **takr**, **talu**, **tamldec**, **telu**, **thai**, **tibt**, **tirh**, **vaii**, **wara**, **wcho**.| -| numeric | boolean | Yes | Yes | Whether to use the 12-hour clock. | -| caseFirst | string | Yes | Yes | Whether upper case or lower case is sorted first. The value can be **upper**, **lower**, or **false**.| +| Name | Type | Readable | Writable | Description | +| --------------- | ------- | -------- | -------- | ---------------------------------------- | +| calendar | string | Yes | Yes | Calendar for the locale. The calue can be any of the following: **buddhist**, **chinese**, **coptic**, **dangi**, **ethioaa**, **ethiopic**, **gregory**, **hebrew**, **indian**, **islamic**, **islamic-umalqura**, **islamic-tbla**, **islamic-civil**, **islamic-rgsa**, **iso8601**, **japanese**, **persian**, **roc**, **islamicc**. | +| collation | string | Yes | Yes | Collation rule. The value can be any of the following: **big5han**, **compat**, **dict**, **direct**, **ducet**, **emoji**, **eor**, **gb2312**, **phonebk**, **phonetic**, **pinyin**, **reformed**,**search**, **searchjl**, **standard**, **stroke**, **trad**, **unihan**, **zhuyin**. | +| hourCycle | string | Yes | Yes | Time system for the locale. The value can be any of the following: **h11**, **h12**, **h23**, **h24**. | +| numberingSystem | string | Yes | Yes | Numbering system for the locale. The value can be any of the following: **adlm**, **ahom**, **arab**, **arabext**, **bali**, **beng**, **bhks**, **brah**, **cakm**, **cham**, **deva**, **diak**, **fullwide**, **gong**, **gonm**, **gujr**, **guru**, **hanidec**, **hmng**, **hmnp**, **java**, **kali**, **khmr**, **knda**, **lana**, **lanatham**, **laoo**, **latn**, **lepc**, **limb**, **mathbold**, **mathdbl**, **mathmono**, **mathsanb**, **mathsans**, **mlym**, **modi**, **mong**, **mroo**, **mtei**, **mymr**, **mymrshan**, **mymrtlng**, **newa**, **nkoo**, **olck**, **orya**, **osma**, **rohg**, **saur**, **segment**, **shrd**, **sind**, **sinh**, **sora**, **sund**, **takr**, **talu**, **tamldec**, **telu**, **thai**, **tibt**, **tirh**, **vaii**, **wara**, **wcho**. | +| numeric | boolean | Yes | Yes | Whether to use the 12-hour clock. | +| caseFirst | string | Yes | Yes | Whether upper case or lower case is sorted first. The value can be **upper**, **lower**, or **false**. | ## DateTimeFormat @@ -173,10 +173,10 @@ Creates a **DateTimeOptions** object for the specified locale. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------- | ----------------------------------- | ---- | ---------------------------- | -| locale | string \| Array<string> | Yes | A string containing locale information, including the language, optional script, and region.| -| options | [DateTimeOptions](#datetimeoptions) | No | Options for creating a **DateTimeFormat** object. | +| Name | Type | Mandatory | Description | +| ------- | ----------------------------------- | --------- | ---------------------------------------- | +| locale | string \| Array<string> | Yes | A string containing locale information, including the language, optional script, and region. | +| options | [DateTimeOptions](#datetimeoptions) | No | Options for creating a **DateTimeFormat** object. | **Example** ```js @@ -199,14 +199,14 @@ Formats the specified date and time. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ---- | ---- | ------- | -| date | Date | Yes | Date and time to be formatted.| +| Name | Type | Mandatory | Description | +| ---- | ---- | --------- | ------------------------------ | +| date | Date | Yes | Date and time to be formatted. | **Return Value** -| Type | Description | -| ------ | ------------ | -| string | A string containing the formatted date and time.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | A string containing the formatted date and time. | **Example** ```js @@ -225,15 +225,15 @@ Formats the specified date range. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| --------- | ---- | ---- | -------- | -| startDate | Date | Yes | Start date and time to be formatted.| -| endDate | Date | Yes | End date and time to be formatted.| +| Name | Type | Mandatory | Description | +| --------- | ---- | --------- | ------------------------------------ | +| startDate | Date | Yes | Start date and time to be formatted. | +| endDate | Date | Yes | End date and time to be formatted. | **Return Value** -| Type | Description | -| ------ | -------------- | -| string | A string containing the formatted date and time range.| +| Type | Description | +| ------ | ---------------------------------------- | +| string | A string containing the formatted date and time range. | **Example** ```js @@ -253,9 +253,9 @@ Obtains the formatting options for **DateTimeFormat** object. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ----------------------------------- | ----------------------------- | -| [DateTimeOptions](#datetimeoptions) | Formatting options for **DateTimeFormat** objects.| +| Type | Description | +| ----------------------------------- | ---------------------------------------- | +| [DateTimeOptions](#datetimeoptions) | Formatting options for **DateTimeFormat** objects. | **Example** ```js @@ -270,27 +270,27 @@ Provides the options for the **DateTimeFormat** object. **System capability**: SystemCapability.Global.I18n -| Name | Type | Readable | Writable | Description | -| --------------- | ------- | ---- | ---- | ---------------------------------------- | -| locale | string | Yes | No | Locale, for example, **zh-Hans-CN**. | -| dateStyle | string | Yes | Yes | Date display format. The value can be **long**, **short**, **medium**, or **full**.| -| timeStyle | string | Yes | Yes | Time display format. The value can be **long**, **short**, **medium**, or **full**.| -| hourCycle | string | Yes | Yes | Time system for the locale. The value can be any of the following: **h11**, **h12**, **h23**, **h24**.| -| timeZone | string | Yes | Yes | Time zone represented by a valid IANA time zone ID. | -| numberingSystem | string | Yes | Yes | Numbering system for the locale. The value can be any of the following: **adlm**, **ahom**, **arab**, **arabext**, **bali**, **beng**, **bhks**, **brah**, **cakm**, **cham**, **deva**, **diak**, **fullwide**, **gong**, **gonm**, **gujr**, **guru**, **hanidec**, **hmng**, **hmnp**, **java**, **kali**, **khmr**, **knda**, **lana**, **lanatham**, **laoo**, **latn**, **lepc**, **limb**, **mathbold**, **mathdbl**, **mathmono**, **mathsanb**, **mathsans**, **mlym**, **modi**, **mong**, **mroo**, **mtei**, **mymr**, **mymrshan**, **mymrtlng**, **newa**, **nkoo**, **olck**, **orya**, **osma**, **rohg**, **saur**, **segment**, **shrd**, **sind**, **sinh**, **sora**, **sund**, **takr**, **talu**, **tamldec**, **telu**, **thai**, **tibt**, **tirh**, **vaii**, **wara**, **wcho**.| -| hour12 | boolean | Yes | Yes | Whether to use the 12-hour clock. | -| weekday | string | Yes | Yes | Workday display format. The value can be **long**, **short**, or **narrow**.| -| era | string | Yes | Yes | Era display format. The value can be **long**, **short**, or **narrow**.| -| year | string | Yes | Yes | Year display format. The value can be **numeric** or **2-digit**. | -| month | string | Yes | Yes | Month display format. The value can be any of the following: **numeric**, **2-digit**, **long**, **short**, **narrow**.| -| day | string | Yes | Yes | Day display format. The value can be **numeric** or **2-digit**. | -| hour | string | Yes | Yes | Hour display format. The value can be **numeric** or **2-digit**. | -| minute | string | Yes | Yes | Minute display format. The value can be **numeric** or **2-digit**. | -| second | string | Yes | Yes | Seconds display format. The value can be **numeric** or **2-digit**. | -| timeZoneName | string | Yes | Yes | Localized representation of a time zone name. | -| dayPeriod | string | Yes | Yes | Time period display format. The value can be **long**, **short**, or **narrow**.| -| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**.| -| formatMatcher | string | Yes | Yes | Format matching algorithm. The value can be **basic** or **best fit**.| +| Name | Type | Readable | Writable | Description | +| --------------- | ------- | -------- | -------- | ---------------------------------------- | +| locale | string | Yes | No | Locale, for example, **zh-Hans-CN**. | +| dateStyle | string | Yes | Yes | Date display format. The value can be **long**, **short**, **medium**, or **full**. | +| timeStyle | string | Yes | Yes | Time display format. The value can be **long**, **short**, **medium**, or **full**. | +| hourCycle | string | Yes | Yes | Time system for the locale. The value can be any of the following: **h11**, **h12**, **h23**, **h24**. | +| timeZone | string | Yes | Yes | Time zone represented by a valid IANA time zone ID. | +| numberingSystem | string | Yes | Yes | Numbering system for the locale. The value can be any of the following: **adlm**, **ahom**, **arab**, **arabext**, **bali**, **beng**, **bhks**, **brah**, **cakm**, **cham**, **deva**, **diak**, **fullwide**, **gong**, **gonm**, **gujr**, **guru**, **hanidec**, **hmng**, **hmnp**, **java**, **kali**, **khmr**, **knda**, **lana**, **lanatham**, **laoo**, **latn**, **lepc**, **limb**, **mathbold**, **mathdbl**, **mathmono**, **mathsanb**, **mathsans**, **mlym**, **modi**, **mong**, **mroo**, **mtei**, **mymr**, **mymrshan**, **mymrtlng**, **newa**, **nkoo**, **olck**, **orya**, **osma**, **rohg**, **saur**, **segment**, **shrd**, **sind**, **sinh**, **sora**, **sund**, **takr**, **talu**, **tamldec**, **telu**, **thai**, **tibt**, **tirh**, **vaii**, **wara**, **wcho**. | +| hour12 | boolean | Yes | Yes | Whether to use the 12-hour clock. | +| weekday | string | Yes | Yes | Workday display format. The value can be **long**, **short**, or **narrow**. | +| era | string | Yes | Yes | Era display format. The value can be **long**, **short**, or **narrow**. | +| year | string | Yes | Yes | Year display format. The value can be **numeric** or **2-digit**. | +| month | string | Yes | Yes | Month display format. The value can be any of the following: **numeric**, **2-digit**, **long**, **short**, **narrow**. | +| day | string | Yes | Yes | Day display format. The value can be **numeric** or **2-digit**. | +| hour | string | Yes | Yes | Hour display format. The value can be **numeric** or **2-digit**. | +| minute | string | Yes | Yes | Minute display format. The value can be **numeric** or **2-digit**. | +| second | string | Yes | Yes | Seconds display format. The value can be **numeric** or **2-digit**. | +| timeZoneName | string | Yes | Yes | Localized representation of a time zone name. | +| dayPeriod | string | Yes | Yes | Time period display format. The value can be **long**, **short**, or **narrow**. | +| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**. | +| formatMatcher | string | Yes | Yes | Format matching algorithm. The value can be **basic** or **best fit**. | ## NumberFormat @@ -319,10 +319,10 @@ Creates a **NumberFormat** object for the specified locale. **System capability**: SystemCapability.Global.I18n Parameters -| Name | Type | Mandatory | Description | -| ------- | ------------------------------- | ---- | ---------------------------- | -| locale | string \| Array<string> | Yes | A string containing locale information, including the language, optional script, and region.| -| options | [NumberOptions](#numberoptions) | No | Options for creating a **NumberFormat** object. | +| Name | Type | Mandatory | Description | +| ------- | ------------------------------- | --------- | ---------------------------------------- | +| locale | string \| Array<string> | Yes | A string containing locale information, including the language, optional script, and region. | +| options | [NumberOptions](#numberoptions) | No | Options for creating a **NumberFormat** object. | **Example** ```js @@ -339,14 +339,14 @@ Formats a number. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ---- | -| number | number | Yes | Number to be formatted.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ----------------------- | +| number | number | Yes | Number to be formatted. | **Return Value** -| Type | Description | -| ------ | ---------- | -| string | Formatted number.| +| Type | Description | +| ------ | ----------------- | +| string | Formatted number. | **Example** @@ -365,9 +365,9 @@ Obtains the options of the **NumberFormat** object. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ------------------------------- | --------------------------- | -| [NumberOptions](#numberoptions) | Formatting options for **NumberFormat** objects.| +| Type | Description | +| ------------------------------- | ---------------------------------------- | +| [NumberOptions](#numberoptions) | Formatting options for **NumberFormat** objects. | **Example** @@ -383,27 +383,27 @@ Provides the device capability. **System capability**: SystemCapability.Global.I18n -| Name | Type | Readable | Writable | Description | -| ------------------------ | ------- | ---- | ---- | ---------------------------------------- | -| locale | string | Yes | No | Locale, for example, **zh-Hans-CN**. | -| currency | string | Yes | Yes | Currency unit, for example, **EUR**, **CNY**, or **USD**. | -| currencySign | string | Yes | Yes | Currency unit symbol. The value can be **symbol**, **narrowSymbol**, **code**, or **name**.| -| currencyDisplay | string | Yes | Yes | Currency display mode. The value can be **symbol**, **narrowSymbol**, **code**, or **name**.| -| unit | string | Yes | Yes | Unit name, for example, **meter**, **inch**, or **hectare**. | -| unitDisplay | string | Yes | Yes | Unit display format. The value can be **long**, **short**, or **medium**.| -| unitUsage8+ | string | Yes | Yes | Unit usage scenario. The value can be any of the following: **default**, **area-land-agricult**, **area-land-commercl**, **area-land-residntl**, **length-person**, **length-person-small**, **length-rainfall**, **length-road**, **length-road-small**, **length-snowfall**, **length-vehicle**, **length-visiblty**, **length-visiblty-small**, **length-person-informal**, **length-person-small-informal**, **length-road-informal**, **speed-road-travel**, **speed-wind**, **temperature-person**, **temperature-weather**, **volume-vehicle-fuel**.| -| signDisplay | string | Yes | Yes | Number sign display format. The value can be **auto**, **never**, **always**, or **expectZero**.| -| compactDisplay | string | Yes | Yes | Compact display format. The value can be **long** or **short**. | -| notation | string | Yes | Yes | Number formatting specification. The value can be **standard**, **scientific**, **engineering**, or **compact**.| -| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**.| -| style | string | Yes | Yes | Number display format. The value can be **decimal**, **currency**, **percent**, or **unit**.| -| numberingSystem | string | Yes | Yes | Numbering system for the locale. The value can be any of the following: **adlm**, **ahom**, **arab**, **arabext**, **bali**, **beng**, **bhks**, **brah**, **cakm**, **cham**, **deva**, **diak**, **fullwide**, **gong**, **gonm**, **gujr**, **guru**, **hanidec**, **hmng**, **hmnp**, **java**, **kali**, **khmr**, **knda**, **lana**, **lanatham**, **laoo**, **latn**, **lepc**, **limb**, **mathbold**, **mathdbl**, **mathmono**, **mathsanb**, **mathsans**, **mlym**, **modi**, **mong**, **mroo**, **mtei**, **mymr**, **mymrshan**, **mymrtlng**, **newa**, **nkoo**, **olck**, **orya**, **osma**, **rohg**, **saur**, **segment**, **shrd**, **sind**, **sinh**, **sora**, **sund**, **takr**, **talu**, **tamldec**, **telu**, **thai**, **tibt**, **tirh**, **vaii**, **wara**, **wcho**.| -| useGrouping | boolean | Yes | Yes | Whether to use grouping for display. | -| minimumIntegerDigits | number | Yes | Yes | Minimum number of digits allowed in the integer part of a number. The value ranges from **1** to **21**. | -| minimumFractionDigits | number | Yes | Yes | Minimum number of digits in the fraction part of a number. The value ranges from **0** to **20**. | -| maximumFractionDigits | number | Yes | Yes | Maximum number of digits in the fraction part of a number. The value ranges from **1** to **21**. | -| minimumSignificantDigits | number | Yes | Yes | Minimum number of the least significant digits. The value ranges from **1** to **21**. | -| maximumSignificantDigits | number | Yes | Yes | Maximum number of the least significant digits. The value ranges from **1** to **21**. | +| Name | Type | Readable | Writable | Description | +| ------------------------ | ------- | -------- | -------- | ---------------------------------------- | +| locale | string | Yes | No | Locale, for example, **zh-Hans-CN**. | +| currency | string | Yes | Yes | Currency unit, for example, **EUR**, **CNY**, or **USD**. | +| currencySign | string | Yes | Yes | Currency unit symbol. The value can be **symbol**, **narrowSymbol**, **code**, or **name**. | +| currencyDisplay | string | Yes | Yes | Currency display mode. The value can be **symbol**, **narrowSymbol**, **code**, or **name**. | +| unit | string | Yes | Yes | Unit name, for example, **meter**, **inch**, or **hectare**. | +| unitDisplay | string | Yes | Yes | Unit display format. The value can be **long**, **short**, or **medium**. | +| unitUsage8+ | string | Yes | Yes | Unit usage scenario. The value can be any of the following: **default**, **area-land-agricult**, **area-land-commercl**, **area-land-residntl**, **length-person**, **length-person-small**, **length-rainfall**, **length-road**, **length-road-small**, **length-snowfall**, **length-vehicle**, **length-visiblty**, **length-visiblty-small**, **length-person-informal**, **length-person-small-informal**, **length-road-informal**, **speed-road-travel**, **speed-wind**, **temperature-person**, **temperature-weather**, **volume-vehicle-fuel**. | +| signDisplay | string | Yes | Yes | Number sign display format. The value can be **auto**, **never**, **always**, or **expectZero**. | +| compactDisplay | string | Yes | Yes | Compact display format. The value can be **long** or **short**. | +| notation | string | Yes | Yes | Number formatting specification. The value can be **standard**, **scientific**, **engineering**, or **compact**. | +| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**. | +| style | string | Yes | Yes | Number display format. The value can be **decimal**, **currency**, **percent**, or **unit**. | +| numberingSystem | string | Yes | Yes | Numbering system for the locale. The value can be any of the following: **adlm**, **ahom**, **arab**, **arabext**, **bali**, **beng**, **bhks**, **brah**, **cakm**, **cham**, **deva**, **diak**, **fullwide**, **gong**, **gonm**, **gujr**, **guru**, **hanidec**, **hmng**, **hmnp**, **java**, **kali**, **khmr**, **knda**, **lana**, **lanatham**, **laoo**, **latn**, **lepc**, **limb**, **mathbold**, **mathdbl**, **mathmono**, **mathsanb**, **mathsans**, **mlym**, **modi**, **mong**, **mroo**, **mtei**, **mymr**, **mymrshan**, **mymrtlng**, **newa**, **nkoo**, **olck**, **orya**, **osma**, **rohg**, **saur**, **segment**, **shrd**, **sind**, **sinh**, **sora**, **sund**, **takr**, **talu**, **tamldec**, **telu**, **thai**, **tibt**, **tirh**, **vaii**, **wara**, **wcho**. | +| useGrouping | boolean | Yes | Yes | Whether to use grouping for display. | +| minimumIntegerDigits | number | Yes | Yes | Minimum number of digits allowed in the integer part of a number. The value ranges from **1** to **21**. | +| minimumFractionDigits | number | Yes | Yes | Minimum number of digits in the fraction part of a number. The value ranges from **0** to **20**. | +| maximumFractionDigits | number | Yes | Yes | Maximum number of digits in the fraction part of a number. The value ranges from **1** to **21**. | +| minimumSignificantDigits | number | Yes | Yes | Minimum number of the least significant digits. The value ranges from **1** to **21**. | +| maximumSignificantDigits | number | Yes | Yes | Maximum number of the least significant digits. The value ranges from **1** to **21**. | ## Collator8+ @@ -433,10 +433,10 @@ Creates a Collator object. **Parameters** -| Name | Type | Mandatory | Description | -| ------- | ----------------------------------- | ---- | ---------------------------- | -| locale | string \| Array<string> | Yes | A string containing locale information, including the language, optional script, and region.| -| options | [CollatorOptions](#collatoroptions) | No | Options for creating a **Collator** object. | +| Name | Type | Mandatory | Description | +| ------- | ----------------------------------- | --------- | ---------------------------------------- | +| locale | string \| Array<string> | Yes | A string containing locale information, including the language, optional script, and region. | +| options | [CollatorOptions](#collatoroptions) | No | Options for creating a **Collator** object. | **Example** ```js @@ -453,15 +453,15 @@ Compares two strings based on the sorting policy of the **Collator** object. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ------ | ------ | ---- | ------------ | -| first | string | Yes | First string to compare. | -| second | string | Yes | Second string to compare.| +| Name | Type | Mandatory | Description | +| ------ | ------ | --------- | ------------------------- | +| first | string | Yes | First string to compare. | +| second | string | Yes | Second string to compare. | **Return Value** -| Type | Description | +| Type | Description | | ------ | ---------------------------------------- | -| number | Comparison result. If the value is a negative number, the first string is before the second string. If the value of number is **0**, the first string is equal to the second string. If the value of number is a positive number, the first string is after the second string.| +| number | Comparison result. If the value is a negative number, the first string is before the second string. If the value of number is **0**, the first string is equal to the second string. If the value of number is a positive number, the first string is after the second string. | **Example** ```js @@ -479,9 +479,9 @@ Returns properties reflecting the locale and collation options of a **Collator** **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ----------------------------------- | ----------------- | -| [CollatorOptions](#collatoroptions) | Properties of the **Collator** object.| +| Type | Description | +| ----------------------------------- | -------------------------------------- | +| [CollatorOptions](#collatoroptions) | Properties of the **Collator** object. | **Example** ```js @@ -496,15 +496,15 @@ Represents the properties of a **Collator** object. **System capability**: SystemCapability.Global.I18n -| Name | Type | Readable | Writable | Description | -| ----------------- | ------- | ---- | ---- | ---------------------------------------- | -| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**.| -| usage | string | Yes | Yes | Whether the comparison is for sorting or for searching. The value can be **sort** or **search**. | -| sensitivity | string | Yes | Yes | Differences in the strings that lead to non-zero return values. The value can be **base**, **accent**, **case**, or **variant**.| -| ignorePunctuation | boolean | Yes | Yes | Whether punctuation is ignored. The value can be **true** or **false**. | -| collation | string | Yes | Yes | Rule for sorting regions. The value can be any of the following: **big5han**, **compat**, **dict**, **direct**, **ducet**, **eor**, **gb2312**, **phonebk**, **phonetic**, **pinyin**, **reformed**, **searchjl**, **stroke**, **trad**, **unihan**, **zhuyin**.| -| numeric | boolean | Yes | Yes | Whether numeric collation is used. The value can be **true** or **false**. | -| caseFirst | string | Yes | Yes | Whether upper case or lower case is sorted first. The value can be **upper**, **lower**, or **false**.| +| Name | Type | Readable | Writable | Description | +| ----------------- | ------- | -------- | -------- | ---------------------------------------- | +| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**. | +| usage | string | Yes | Yes | Whether the comparison is for sorting or for searching. The value can be **sort** or **search**. | +| sensitivity | string | Yes | Yes | Differences in the strings that lead to non-zero return values. The value can be **base**, **accent**, **case**, or **variant**. | +| ignorePunctuation | boolean | Yes | Yes | Whether punctuation is ignored. The value can be **true** or **false**. | +| collation | string | Yes | Yes | Rule for sorting regions. The value can be any of the following: **big5han**, **compat**, **dict**, **direct**, **ducet**, **eor**, **gb2312**, **phonebk**, **phonetic**, **pinyin**, **reformed**, **searchjl**, **stroke**, **trad**, **unihan**, **zhuyin**. | +| numeric | boolean | Yes | Yes | Whether numeric collation is used. The value can be **true** or **false**. | +| caseFirst | string | Yes | Yes | Whether upper case or lower case is sorted first. The value can be **upper**, **lower**, or **false**. | ## PluralRules8+ @@ -533,10 +533,10 @@ Create a **PluralRules** object. **System capability**: SystemCapability.Global.I18n Parameters -| Name | Type | Mandatory | Description | -| ------- | ---------------------------------------- | ---- | ---------------------------- | -| locale | string \| Array<string> | Yes | A string containing locale information, including the language, optional script, and region.| -| options | [PluralRulesOptions](#pluralrulesoptions) | No | Options for creating a **PluralRules** object. | +| Name | Type | Mandatory | Description | +| ------- | ---------------------------------------- | --------- | ---------------------------------------- | +| locale | string \| Array<string> | Yes | A string containing locale information, including the language, optional script, and region. | +| options | [PluralRulesOptions](#pluralrulesoptions) | No | Options for creating a **PluralRules** object. | **Example** ```js @@ -553,14 +553,14 @@ Obtains a string that represents the singular-plural type of the specified numbe **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ---- | ------ | ---- | ------------ | -| n | number | Yes | Number for which the singular-plural type is to be obtained.| +| Name | Type | Mandatory | Description | +| ---- | ------ | --------- | ---------------------------------------- | +| n | number | Yes | Number for which the singular-plural type is to be obtained. | **Return Value** -| Type | Description | +| Type | Description | | ------ | ---------------------------------------- | -| string | Singular-plural type. The value can be any of the following: **one**, **two**, **few**, **many**, **others**.| +| string | Singular-plural type. The value can be any of the following: **one**, **two**, **few**, **many**, **others**. | **Example** ```js @@ -575,15 +575,15 @@ Represents the properties of a **PluralRules** object. **System capability**: SystemCapability.Global.I18n -| Name | Type | Readable | Writable | Description | -| ------------------------ | ------ | ---- | ---- | ---------------------------------------- | -| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**.| -| type | string | Yes | Yes | Sorting type. The value can be **cardinal** or **ordinal**. | -| minimumIntegerDigits | number | Yes | Yes | Minimum number of digits allowed in the integer part of a number. The value ranges from **1** to **21**. | -| minimumFractionDigits | number | Yes | Yes | Minimum number of digits in the fraction part of a number. The value ranges from **0** to **20**. | -| maximumFractionDigits | number | Yes | Yes | Maximum number of digits in the fraction part of a number. The value ranges from **1** to **21**. | -| minimumSignificantDigits | number | Yes | Yes | Minimum number of the least significant digits. The value ranges from **1** to **21**. | -| maximumSignificantDigits | number | Yes | Yes | Maximum number of the least significant digits. The value ranges from **1** to **21**. | +| Name | Type | Readable | Writable | Description | +| ------------------------ | ------ | -------- | -------- | ---------------------------------------- | +| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**. | +| type | string | Yes | Yes | Sorting type. The value can be **cardinal** or **ordinal**. | +| minimumIntegerDigits | number | Yes | Yes | Minimum number of digits allowed in the integer part of a number. The value ranges from **1** to **21**. | +| minimumFractionDigits | number | Yes | Yes | Minimum number of digits in the fraction part of a number. The value ranges from **0** to **20**. | +| maximumFractionDigits | number | Yes | Yes | Maximum number of digits in the fraction part of a number. The value ranges from **1** to **21**. | +| minimumSignificantDigits | number | Yes | Yes | Minimum number of the least significant digits. The value ranges from **1** to **21**. | +| maximumSignificantDigits | number | Yes | Yes | Maximum number of the least significant digits. The value ranges from **1** to **21**. | ## RelativeTimeFormat8+ @@ -612,10 +612,10 @@ Creates a **RelativeTimeFormat** object. **System capability**: SystemCapability.Global.I18n Parameters -| Name | Type | Mandatory | Description | -| ------- | ---------------------------------------- | ---- | ---------------------------- | -| locale | string \| Array<string> | Yes | A string containing locale information, including the language, optional script, and region.| -| options | [RelativeTimeFormatInputOptions](#relativetimeformatinputoptions) | No | Options for creating a **RelativeTimeFormat** object. | +| Name | Type | Mandatory | Description | +| ------- | ---------------------------------------- | --------- | ---------------------------------------- | +| locale | string \| Array<string> | Yes | A string containing locale information, including the language, optional script, and region. | +| options | [RelativeTimeFormatInputOptions](#relativetimeformatinputoptions) | No | Options for creating a **RelativeTimeFormat** object. | **Example** ```js @@ -632,15 +632,15 @@ Formats the value and unit based on the specified locale and formatting options. **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ----- | ------ | ---- | ---------------------------------------- | -| value | number | Yes | Value to format. | -| unit | string | Yes | Unit to format. The value can be any of the following: **year**, **quarter**, **month**, **week**, **day**, **hour**, **minute**, **second**.| +| Name | Type | Mandatory | Description | +| ----- | ------ | --------- | ---------------------------------------- | +| value | number | Yes | Value to format. | +| unit | string | Yes | Unit to format. The value can be any of the following: **year**, **quarter**, **month**, **week**, **day**, **hour**, **minute**, **second**. | **Return Value** -| Type | Description | -| ------ | ---------- | -| string | Relative time after formatting.| +| Type | Description | +| ------ | ------------------------------- | +| string | Relative time after formatting. | **Example** ```js @@ -658,15 +658,15 @@ Returns an array of RelativeTimeFormat objects in parts for locale-aware formatt **System capability**: SystemCapability.Global.I18n **Parameters** -| Name | Type | Mandatory | Description | -| ----- | ------ | ---- | ---------------------------------------- | -| value | number | Yes | Value to format. | -| unit | string | Yes | Unit to format. The value can be any of the following: **year**, **quarter**, **month**, **week**, **day**, **hour**, **minute**, **second**.| +| Name | Type | Mandatory | Description | +| ----- | ------ | --------- | ---------------------------------------- | +| value | number | Yes | Value to format. | +| unit | string | Yes | Unit to format. The value can be any of the following: **year**, **quarter**, **month**, **week**, **day**, **hour**, **minute**, **second**. | **Return Value** -| Type | Description | -| ------------------- | --------------------------- | -| Array<object> | An array of **RelativeTimeFormat** objects in parts.| +| Type | Description | +| ------------------- | ---------------------------------------- | +| Array<object> | An array of **RelativeTimeFormat** objects in parts. | **Example** ```js @@ -684,9 +684,9 @@ Obtains the formatting options for **RelativeTimeFormat** objects. **System capability**: SystemCapability.Global.I18n **Return Value** -| Type | Description | -| ---------------------------------------- | --------------------------------- | -| [RelativeTimeFormatResolvedOptions](#relativetimeformatresolvedoptions) | Formatting options for **RelativeTimeFormat** objects.| +| Type | Description | +| ---------------------------------------- | ---------------------------------------- | +| [RelativeTimeFormatResolvedOptions](#relativetimeformatresolvedoptions) | Formatting options for **RelativeTimeFormat** objects. | **Example** ```js @@ -701,11 +701,11 @@ Represents the properties of a **RelativeTimeFormat** object. **System capability**: SystemCapability.Global.I18n -| Name | Type | Readable | Writable | Description | -| ------------- | ------ | ---- | ---- | ---------------------------------------- | -| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**.| -| numeric | string | Yes | Yes | Format of the output message. The value can be **always** or **auto**. | -| style | string | Yes | Yes | Length of an internationalized message. The value can be **long**, **short**, or **narrow**.| +| Name | Type | Readable | Writable | Description | +| ------------- | ------ | -------- | -------- | ---------------------------------------- | +| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**. | +| numeric | string | Yes | Yes | Format of the output message. The value can be **always** or **auto**. | +| style | string | Yes | Yes | Length of an internationalized message. The value can be **long**, **short**, or **narrow**. | ## RelativeTimeFormatResolvedOptions8+ @@ -714,9 +714,9 @@ Represents the properties of a **RelativeTimeFormat** object. **System capability**: SystemCapability.Global.I18n -| Name | Type | Readable | Writable | Description | -| --------------- | ------ | ---- | ---- | ---------------------------------------- | -| locale | string | Yes | Yes | A string containing locale information, including the language, optional script, and region. | -| numeric | string | Yes | Yes | Format of the output message. The value can be **always** or **auto**. | -| style | string | Yes | Yes | Length of an internationalized message. The value can be **long**, **short**, or **narrow**.| -| numberingSystem | string | Yes | Yes | Numbering system. | +| Name | Type | Readable | Writable | Description | +| --------------- | ------ | -------- | -------- | ---------------------------------------- | +| locale | string | Yes | Yes | A string containing locale information, including the language, optional script, and region. | +| numeric | string | Yes | Yes | Format of the output message. The value can be **always** or **auto**. | +| style | string | Yes | Yes | Length of an internationalized message. The value can be **long**, **short**, or **narrow**. | +| numberingSystem | string | Yes | Yes | Numbering system. | diff --git a/en/application-dev/reference/apis/js-apis-system-time.md b/en/application-dev/reference/apis/js-apis-system-time.md index 35e09c4168db955cf6a5d5741a536dcd0711c3b7..b23a5156cca257811966b42775ca542f29f0b3c0 100644 --- a/en/application-dev/reference/apis/js-apis-system-time.md +++ b/en/application-dev/reference/apis/js-apis-system-time.md @@ -1,18 +1,17 @@ -# Setting the System Time +# System Time and Time Zone -This module is used to set and obtain the current system date, time, and time zone. - -> **NOTE**
The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. +The **systemTime** module provides system time and time zone features. You can use the APIs of this module to set and obtain the system time and time zone. +> **NOTE** +> +> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. ## Modules to Import - -``` +```js import systemTime from '@ohos.systemTime'; ``` - ## systemTime.setTime setTime(time : number, callback : AsyncCallback<void>) : void @@ -25,25 +24,24 @@ Sets the system time. This API uses an asynchronous callback to return the resul **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| time | number | Yes| Timestamp to set, in milliseconds.| -| callback | AsyncCallback<void> | Yes| Callback used to process the received return value.| +| Name | Type | Mandatory| Description | +| -------- | ----------- | ---- | ---------------- | +| time | number | Yes | Timestamp to set, in milliseconds. | +| callback | AsyncCallback<void> | Yes | Callback used to return the result.| **Example** - ```js +```js // Set the system time to 2021-01-20 02:36:25. - var time = 1611081385000; - systemTime.setTime(time, (error, data) => { - if (error) { - console.error(`failed to systemTime.setTime because ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.setTime success data : ` + JSON.stringify(data)); - }); - ``` - +let time = 1611081385000; +systemTime.setTime(time, (error) => { + if (error) { + console.error(`Failed to set systemTime. Cause:` + JSON.stringify(error)); + return; + } + console.log('Succeeded in setting systemTime.'); +}); +``` ## systemTime.setTime @@ -57,28 +55,27 @@ Sets the system time. This API uses a promise to return the result. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| time | number | Yes| Timestamp to set, in milliseconds.| +| Name| Type | Mandatory| Description | +| ------ | ------ | ---- | ------------------ | +| time | number | Yes | Timestamp to set, in milliseconds.| **Return value** -| Type| Description| -| -------- | -------- | -| Promise<void> | Promise used to return the result.| +| Type | Description | +| ------------------- | ------------------------- | +| Promise<void> | Promise that returns no value.| **Example** - ```js +```js // Set the system time to 2021-01-20 02:36:25. -var time = 1611081385000; -systemTime.setTime(time).then((data) => { - console.log(`systemTime.setTime success data : ` + JSON.stringify(data)); +let time = 1611081385000; +systemTime.setTime(time).then(() => { + console.log('Succeeded in setting systemTime.'); }).catch((error) => { - console.error(`failed to systemTime.setTime because ` + JSON.stringify(error)); + console.error(`Failed to set systemTime. Cause:` + JSON.stringify(error)); }); - ``` - +``` ## systemTime.getCurrentTime8+ @@ -90,23 +87,22 @@ Obtains the time elapsed since the Unix epoch. This API uses an asynchronous cal **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.| -| callback | AsyncCallback<number> | Yes| Callback used to return the time.| +| Name | Type | Mandatory| Description | +| -------- | -------------- | ---- | ------------------ | +| isNano | boolean | No | Whether the time to return is in nanoseconds.
- **true**: in nanoseconds (ns).
- **false**: in milliseconds (ms).| +| callback | AsyncCallback<number> | Yes | Callback used to return the time elapsed since the Unix epoch. | **Example** - ```js - systemTime.getCurrentTime(true, (error, data) => { - if (error) { - console.error(`failed to systemTime.getCurrentTime because ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.getCurrentTime success data : ` + JSON.stringify(data)); - }); - ``` - +```js +systemTime.getCurrentTime(true, (error, data) => { + if (error) { + console.error(`Failed to get systemTime. Cause:` + JSON.stringify(error)); + return; + } + console.log(`Succeeded in getting systemTime.Data: ` + JSON.stringify(data)); +}); +``` ## systemTime.getCurrentTime8+ @@ -118,144 +114,139 @@ Obtains the time elapsed since the Unix epoch. This API uses a promise to return **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.| +| Name| Type | Mandatory| Description | +| ------ | ------- | ---- | ------------------------- | +| isNano | boolean | No | Whether the time to return is in nanoseconds.
- **true**: in nanoseconds (ns).
- **false**: in milliseconds (ms).| **Return value** -| Type| Description| -| -------- | -------- | -| Promise<number> | Promise used to return the time.| +| Type | Description | +| --------------------- | --------------------------- | +| Promise<number> | Promise used to return the time elapsed since the Unix epoch.| **Example** - ```js - systemTime.getCurrentTime().then((data) => { - console.log(`systemTime.getCurrentTime success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.getCurrentTime because ` + JSON.stringify(error)); - }); - ``` - +```js +systemTime.getCurrentTime().then((data) => { + console.log(`Succeeded in getting systemTime.Data: ` + JSON.stringify(data)); +}).catch((error) => { + console.error(`Failed to get systemTime. Cause:` + JSON.stringify(error)); +}); +``` ## systemTime.getRealActiveTime8+ getRealActiveTime(isNano?: boolean, callback: AsyncCallback<number>): void -Obtains the time elapsed since system start, excluding the deep sleep time. This API uses an asynchronous callback to return the result. +Obtains the time elapsed since system startup, excluding the deep sleep time. This API uses an asynchronous callback to return the result. **System capability**: SystemCapability.MiscServices.Time **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.| -| callback | AsyncCallback<number> | Yes| Callback used to return the time.| +| Name | Type | Mandatory| Description | +| -------- | ---------- | ---- | -------------------------- | +| isNano | boolean | No | Whether the time to return is in nanoseconds.
- **true**: in nanoseconds (ns).
- **false**: in milliseconds (ms).| +| callback | AsyncCallback<number> | Yes | Callback used to return the time.| **Example** - ```js - systemTime.getRealActiveTime(true, (error, data) => { - if (error) { - console.error(`failed to systemTime.getRealActiveTimebecause ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data)); - }); - ``` - +```js +systemTime.getRealActiveTime(true, (error, data) => { + if (error) { + console.error(`Failed to get real active systemTime. Cause:` + JSON.stringify(error)); + return; + } + console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data)); +}); +``` ## systemTime.getRealActiveTime8+ getRealActiveTime(isNano?: boolean): Promise<number> -Obtains the time elapsed since system start, excluding the deep sleep time. This API uses a promise to return the result. +Obtains the time elapsed since system startup, excluding the deep sleep time. This API uses a promise to return the result. **System capability**: SystemCapability.MiscServices.Time **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.| +| Name| Type | Mandatory| Description | +| ------ | ------- | ---- | ----------------------------------- | +| isNano | boolean | No | Whether the time to return is in nanoseconds.
- **true**: in nanoseconds (ns).
- **false**: in milliseconds (ms).| **Return value** -| Type| Description| -| -------- | -------- | -| Promise<number> | Promise used to return the time.| +| Type | Description | +| -------------- | -------------------------------- | +| Promise<number> | Promise used to return the time elapsed since system startup, excluding the deep sleep time.| **Example** - ```js - systemTime.getRealActiveTime().then((data) => { - console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.getRealActiveTime because ` + JSON.stringify(error)); - }); - ``` - +```js +systemTime.getRealActiveTime().then((data) => { + console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data)); +}).catch((error) => { + console.error(`Failed to get real active systemTime. Cause:` + JSON.stringify(error)); +}); +``` ## systemTime.getRealTime8+ getRealTime(isNano?: boolean, callback: AsyncCallback<number>): void -Obtains the time elapsed since system start, including the deep sleep time. This API uses an asynchronous callback to return the result. +Obtains the time elapsed since system startup, including the deep sleep time. This API uses an asynchronous callback to return the result. **System capability**: SystemCapability.MiscServices.Time **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.| -| callback | AsyncCallback<number> | Yes| Callback used to return the time.| +| Name | Type | Mandatory| Description | +| -------- | --------------- | ---- | ------------------------------- | +| isNano | boolean | No | Whether the time to return is in nanoseconds.
- **true**: in nanoseconds (ns).
- **false**: in milliseconds (ms).| +| callback | AsyncCallback<number> | Yes | Callback used to return the time. | **Example** - ```js - systemTime.getRealTime(true, (error, data) => { - if (error) { - console.error(`failed to systemTime.getRealTime because ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.getRealTime success data: ` + JSON.stringify(data)); - }); - ``` - +```js +systemTime.getRealTime(true, (error, data) => { + if (error) { + console.error(`Failed to get real systemTime. Cause:` + JSON.stringify(error)); + return; + } + console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data)); +}); +``` ## systemTime.getRealTime8+ getRealTime(isNano?: boolean): Promise<number> -Obtains the time elapsed since system start, including the deep sleep time. This API uses a promise to return the result. +Obtains the time elapsed since system startup, including the deep sleep time. This API uses a promise to return the result. **System capability**: SystemCapability.MiscServices.Time **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.| +| Name| Type | Mandatory| Description | +| ------ | ------- | ---- | ------------------------------- | +| isNano | boolean | No | Whether the time to return is in nanoseconds.<
- **true**: in nanoseconds (ns).
- **false**: in milliseconds (ms).| **Return value** -| Type| Description| -| -------- | -------- | -| Promise<number> | Promise used to return the time.| +| Type | Description | +| --------------------- | ------------------------------- | +| Promise<number> | Promise used to return the time elapsed since system startup, including the deep sleep time.| **Example** - ```js - systemTime.getRealTime().then((data) => { - console.log(`systemTime.getRealTime success data: ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.getRealTime because ` + JSON.stringify(error)); - }); - ``` - +```js +systemTime.getRealTime().then((data) => { + console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data)); +}).catch((error) => { + console.error(`Failed to get real systemTime. Cause:` + JSON.stringify(error)); +}); +``` ## systemTime.setDate @@ -269,24 +260,23 @@ Sets the system date. This API uses an asynchronous callback to return the resul **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| date | Date | Yes| Target date to set.| -| callback | AsyncCallback<void> | Yes| Callback used to process the received return value.| +| Name | Type | Mandatory| Description | +| -------- | ------------- | ---- | --------------------- | +| date | Date | Yes | Target date to set. | +| callback | AsyncCallback<void> | Yes | Callback used to return the result.| **Example** - ```js - var data = new Date("October 13, 2020 11:13:00"); - systemTime.setDate(data,(error, data) => { - if (error) { - console.error('failed to systemTime.setDate because ' + JSON.stringify(error)); - return; - } - console.info('systemTime.setDate success data : ' + JSON.stringify(data)); - }); - ``` - +```js +let data = new Date("October 13, 2020 11:13:00"); +systemTime.setDate(data,(error) => { + if (error) { + console.error('Failed to set systemDate. Cause: ' + JSON.stringify(error)); + return; +} + console.info('Succeeded in setting systemDate.'); +}); +``` ## systemTime.setDate @@ -300,27 +290,26 @@ Sets the system date. This API uses a promise to return the result. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| date | Date | Yes| Target date to set.| +| Name| Type| Mandatory| Description | +| ------ | ---- | ---- | ---------- | +| date | Date | Yes | Target date to set.| **Return value** -| Type| Description| -| -------- | -------- | -| Promise<void> | Promise used to return the result.| +| Type | Description | +| ------------------- | -------------------- | +| Promise<void> | Promise that returns no value.| **Example** - ```js - var data = new Date("October 13, 2020 11:13:00"); - systemTime.setDate(data).then((value) => { - console.log(`systemTime.setDate success data : ` + JSON.stringify(value)); - }).catch((error) => { - console.error(`failed to systemTime.setDate because: ` + JSON.stringify(error)); - }); - ``` - +```js +let data = new Date("October 13, 2020 11:13:00"); +systemTime.setDate(data).then(() => { + console.log('Succeeded in setting systemDate.'); +}).catch((error) => { + console.error(`Failed to set systemDate. Cause: ` + JSON.stringify(error)); +}); +``` ## systemTime.getDate8+ @@ -332,47 +321,45 @@ Obtains the current system date. This API uses an asynchronous callback to retur **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| callback | AsyncCallback<Date> | Yes| Callback used to return the current system date.| +| Name | Type | Mandatory| Description | +| -------- | -------------- | ---- | --------------------- | +| callback | AsyncCallback<Date> | Yes | Callback used to return the current system date.| **Example** - ```js - systemTime.getDate((error, data) => { - if (error) { - console.error(`failed to systemTime.getDate because ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.getDate success data : ` + JSON.stringify(data)); - }); - ``` - +```js +systemTime.getDate((error, data) => { + if (error) { + console.error(`Failed to get systemDate. Cause: ` + JSON.stringify(error)); + return; + } + console.log(`Succeeded in getting systemDate. Data: ` + JSON.stringify(data)); +}); +``` ## systemTime.getDate8+ getDate(): Promise<Date> -Obtains the current system date. This API uses a promise to return the result. +Obtains the current system date. This API uses a promise to return the result. **System capability**: SystemCapability.MiscServices.Time **Return value** -| Type| Description| -| -------- | -------- | +| Type | Description | +| ------------------- | ----------------------------------------- | | Promise<Date> | Promise used to return the current system date.| **Example** - ```js - systemTime.getDate().then((data) => { - console.log(`systemTime.getDate success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.getDate because ` + JSON.stringify(error)); - }); - ``` - +```js +systemTime.getDate().then((data) => { + console.log(`Succeeded in getting systemDate. Data: ` + JSON.stringify(data)); +}).catch((error) => { + console.error(`Failed to get systemDate. Cause: ` + JSON.stringify(error)); +}); +``` ## systemTime.setTimezone @@ -386,23 +373,22 @@ Sets the system time zone. This API uses an asynchronous callback to return the **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| timezone | string | Yes| System time zone to set.| -| callback | AsyncCallback<void> | Yes| Callback used to process the received return value.| +| Name | Type | Mandatory| Description | +| -------- | ------------- | ---- | -------------------------- | +| timezone | string | Yes | System time zone to set. | +| callback | AsyncCallback<void> | Yes | Callback used to return the result.| **Example** - ```js - systemTime.setTimezone('Asia/Shanghai', (error, data) => { - if (error) { - console.error('failed to systemTime.setTimezone because ' + JSON.stringify(error)); - return; - } - console.info('SystemTimePlugin systemTime.setTimezone success data : ' + JSON.stringify(data)); - }); - ``` - +```js +systemTime.setTimezone('Asia/Shanghai', (error) => { + if (error) { + console.error('Failed to set systemTimeZone. Cause: ' + JSON.stringify(error)); + return; + } + console.info('Succeeded in setting systemTimeZone.'); +}); +``` ## systemTime.setTimezone @@ -416,26 +402,25 @@ Sets the system time zone. This API uses a promise to return the result. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| timezone | string | Yes| System time zone to set.| +| Name | Type | Mandatory| Description | +| -------- | ------ | ---- | ---------- | +| timezone | string | Yes | System time zone to set.| **Return value** -| Type| Description| -| -------- | -------- | -| Promise<void> | Promise used to return the result.| +| Type | Description | +| ------------------- | -------------------- | +| Promise<void> | Promise that returns no value.| **Example** - ```js - systemTime.setTimezone('Asia/Shanghai').then((data) => { - console.log(`systemTime.setTimezone success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.setTimezone because: ` + JSON.stringify(error)); - }); - ``` - +```js +systemTime.setTimezone('Asia/Shanghai').then(() => { + console.log('Succeeded in setting systemTimeZone.'); +}).catch((error) => { + console.error(`Failed to set systemTimeZone. Cause: ` + JSON.stringify(error)); +}); +``` ## systemTime.getTimezone8+ @@ -447,22 +432,21 @@ Obtains the system time zone. This API uses an asynchronous callback to return t **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| callback | AsyncCallback<string> | Yes| Callback used to return the system time zone.| +| Name | Type | Mandatory| Description | +| -------- | --------- | ---- | ------------------------ | +| callback | AsyncCallback<string> | Yes | Callback used to return the system time zone.| **Example** - ```js - systemTime.getTimezone((error, data) => { - if (error) { - console.error(`failed to systemTime.getTimezone because ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.getTimezone success data : ` + JSON.stringify(data)); - }); - ``` - +```js +systemTime.getTimezone((error, data) => { + if (error) { + console.error(`Failed to get systemTimeZone. Cause: ` + JSON.stringify(error)); + return; + } + console.log(`Succeeded in getting systemTimeZone. Data: ` + JSON.stringify(data)); +}); +``` ## systemTime.getTimezone8+ @@ -474,16 +458,16 @@ Obtains the system time zone. This API uses a promise to return the result. **Return value** -| Type| Description| -| -------- | -------- | +| Type | Description | +| --------------------- | ------------------------------------- | | Promise<string> | Promise used to return the system time zone.| **Example** - ```js - systemTime.getTimezone().then((data) => { - console.log(`systemTime.getTimezone success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.getTimezone because ` + JSON.stringify(error)); - }); - ``` +```js +systemTime.getTimezone().then((data) => { + console.log(`Succeeded in getting systemTimeZone. Data: ` + JSON.stringify(data)); +}).catch((error) => { + console.error(`Failed to get systemTimeZone. Cause: ` + JSON.stringify(error)); +}); +``` diff --git a/en/application-dev/reference/arkui-js/js-components-container-dialog.md b/en/application-dev/reference/arkui-js/js-components-container-dialog.md index dba6b21f822e4c07faef3e40c2cbed79f2d2b3b5..a37adca994facb60950bc6d072541108509680c8 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-dialog.md +++ b/en/application-dev/reference/arkui-js/js-components-container-dialog.md @@ -1,61 +1,67 @@ # dialog -The **<dialog>** component is a custom pop-up container. +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + +The **\** component is a custom dialog box. ## Required Permissions None -## Child Components -A single child component is supported. +## Child Components -## Attributes +This component supports only one child component. -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. +## Attributes +In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. -| Name | Type | Default Value | Mandatory | Description | -| --------------------- | ------- | ------------- | --------- | ---------------------------------- | -| dragable7+ | boolean | false | No | Whether the pop-up can be dragged. | +| Name | Type | Default Value | Mandatory | Description | +| --------------------- | ------- | ----- | ---- | ------------ | +| dragable7+ | boolean | false | No | Whether the dialog box can be dragged.| -> ![img](https://gitee.com/openharmony/docs/raw/master/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** +> **NOTE** > -> - The **<dialog>** component does not support the **focusable** and **click-effect** attributes. +> The **\** component does not support the **focusable** and **click-effect** attributes. + ## Styles -Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](js-components-common-styles.md) are supported. +Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](../arkui-js/js-components-common-styles.md) are supported. -## Events -Events in [Universal Events](js-components-common-events.md) are not supported. The following table lists the supported event. +## Events +The following events are supported. The [universal events](../arkui-js/js-components-common-events.md) are not supported. +| Name | Parameter | Description | +| ------------------ | ---- | -------------------------- | +| cancel | - | Triggered when a user touches an area outside the dialog box to cancel the dialog box.| +| show7+ | - | Triggered when the dialog box is displayed. | +| close7+ | - | Triggered when the dialog box is closed. | -| Name | Parameter | Description | -| ------- | --------- | ------------------------------------------------------------ | -| cancel | - | Triggered when a user taps a non-dialog area to cancel the pop-up. | -| show7+ | - | Triggered when the pop-up is displayed. | -| close7+ | - | Triggered when the pop-up is closed. | ## Methods -Methods in [Universal Methods](js-components-common-methods.md) are not supported. The following table lists the supported methods. - +The following methods are supported. The [universal methods](../arkui-js/js-components-common-methods.md) are not supported. +| Name | Parameter | Description | +| ----- | ---- | ------ | +| show | - | Shows a dialog box.| +| close | - | Close the dialog box.| -| Name | Parameter | Description | -| ----- | --------- | -------------------- | -| show | - | Shows a dialog box. | -| close | - | Closes a dialog box. | +> **NOTE** +> +> Attributes and styles of a **\** component cannot be dynamically updated. -> ![img](https://gitee.com/openharmony/docs/raw/master/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** Attributes and styles of a **\** component cannot be dynamically updated. -## Example Code +## Example -``` +```html
@@ -73,6 +79,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
+``` + +```css /* xxx.css */ .doc-page { flex-direction: column; @@ -119,30 +128,33 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte background-color: #F2F2F2; text-color: #0D81F2; } +``` + +```js // xxx.js import prompt from '@system.prompt'; export default { - showDialog(e) { + showDialog() { this.$element('simpledialog').show() }, - cancelDialog(e) { + cancelDialog() { prompt.showToast({ message: 'Dialog cancelled' }) }, - cancelSchedule(e) { + cancelSchedule() { this.$element('simpledialog').close() prompt.showToast({ message: 'Successfully cancelled' }) }, - setSchedule(e) { + setSchedule() { this.$element('simpledialog').close() prompt.showToast({ message: 'Successfully confirmed' }) }, - doubleclick(e){ + doubleclick(){ prompt.showToast({ message: 'doubleclick' }) @@ -150,4 +162,4 @@ export default { } ``` -![img](figures/4.gif) \ No newline at end of file +![4](figures/4.gif) diff --git a/en/application-dev/reference/arkui-js/js-components-svg.md b/en/application-dev/reference/arkui-js/js-components-svg.md index 1ac5d3f287246d41e586a71069c892774e3533a3..505d287be94fd38c8a059aa7ec44b4f0164ca789 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg.md +++ b/en/application-dev/reference/arkui-js/js-components-svg.md @@ -4,9 +4,9 @@ The **\** component is a basic container. It can be used as the root node o > **NOTE** -> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -> -> - The width and height must be defined for the **** parent component or **** component. Otherwise, the component is not drawn. +> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> +> - The width and height must be defined for the **** parent component or **** component. Otherwise, the component is not drawn. ## Required Permissions @@ -15,21 +15,21 @@ None ## Child Components -The following are supported: [\](js-components-svg.md), [\](js-components-svg-rect.md), [\](js-components-svg-circle.md), [\](../arkui-js/js-components-svg-ellipse.md), [\](js-components-svg-path.md), [\](../arkui-js/js-components-svg-polygon.md), [\](js-components-svg-polyline.md), [\](js-components-svg-text.md), [\](js-components-svg-animate.md), and [\](js-components-svg-animateTransform.md). +The following are supported: [\](js-components-svg.md), [\](js-components-svg-rect.md), [\](js-components-svg-circle.md), [\](../arkui-js/js-components-svg-ellipse.md), [\](js-components-svg-path.md), [\](../arkui-js/js-components-svg-polygon.md), [\](js-components-svg-polyline.md), [\](js-components-svg-text.md), [\](js-components-svg-animate.md), and [\](js-components-svg-animatetransform.md). ## Attributes The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components. -| Name| Type| Default Value| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -| id | string | - | No| Unique ID of the component.| -| width | <length>\|<percentage> | - | No| Component width.| -| height | <length>\|<percentage> | - | No| Component height.| -| x | <length>\|<percentage> | - | No| X-coordinate of the current **\** component. The settings do not work for the root **\** node. | -| y | <length>\|<percentage> | | No| Y-coordinate of the current **\** component. The settings do not work for the root **\** node. | -| viewBox | string | - | No| View box of the current **\** component. The supported format is \. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\** component. The view box is scaled in center-aligned mode. | +| Name | Type | Default Value | Mandatory | Description | +| ------- | ---------------------------------- | ------------- | --------- | ---------------------------------------- | +| id | string | - | No | Unique ID of the component. | +| width | <length>\|<percentage> | - | No | Component width. | +| height | <length>\|<percentage> | - | No | Component height. | +| x | <length>\|<percentage> | - | No | X-coordinate of the current **\** component. The settings do not work for the root **\** node. | +| y | <length>\|<percentage> | | No | Y-coordinate of the current **\** component. The settings do not work for the root **\** node. | +| viewBox | string | - | No | View box of the current **\** component. The supported format is \. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\** component. The view box is scaled in center-aligned mode. | ## Example diff --git a/en/application-dev/reference/arkui-ts/figures/badge.png b/en/application-dev/reference/arkui-ts/figures/badge.png new file mode 100644 index 0000000000000000000000000000000000000000..0041374b52a2be5a93f620dabed0cba74990ee6f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/badge.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001184628104.png b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001184628104.png new file mode 100644 index 0000000000000000000000000000000000000000..5986356fa4f5c8e40057ce4e6e1e16307b228b62 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001184628104.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image2_0000001184628104.png b/en/application-dev/reference/arkui-ts/figures/en-us_image2_0000001184628104.png new file mode 100644 index 0000000000000000000000000000000000000000..b1adc0e02a67216e458df85cb263353c577e0a33 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image2_0000001184628104.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264372.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264372.png new file mode 100644 index 0000000000000000000000000000000000000000..3a47b72b0963c84b20b208c0806f7813c7ce652b Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264372.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582848.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582848.png new file mode 100644 index 0000000000000000000000000000000000000000..a5c155b70174d682f3536fa2b23381e1ce9c9361 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582848.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001231374559.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001231374559.png new file mode 100644 index 0000000000000000000000000000000000000000..9eb00739d606ea0b53542eba7c43f6cbb82c73c5 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001231374559.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md index 111ab5ff8e7a4d7b0f3af6cf040c0ac5778c9288..51a62927be1375bf3564a4753200e48565d2f27d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md @@ -1,47 +1,42 @@ # Divider +The **\** component is used to separate content blocks and elements. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **<Divider>** component is used to separate content blocks and content elements. - - -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -None +Not supported ## APIs Divider() - ## Attributes -| Name | Type | Default Value | Description | -| -------- | -------- | -------- | -------- | -| vertical | boolean | false | Whether a vertical divider is used. The value **true** means that a vertical divider is used, and **false** means that a horizontal divider is used. | -| color | Color | - | Color of the divider. | -| strokeWidth | Length | 1 | Width of the divider. | -| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle-enums) | LineCapStyle.Butt | Cap style of the divider. | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type | Description | +| ----------- | ---------- | ------------------ | +| vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.
**true**: A vertical divider is used.
Default value: **false**| +| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.| +| strokeWidth | number \| string | Width of the divider.
Default value: **1**| +| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.
Default value: **LineCapStyle.Butt**| ## Events -Universal events are not supported. +The universal events are not supported. ## Example - -``` +```ts +// xxx.ets @Entry @Component struct DividerExample { diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md index 4d653819c3a3a07fc0951112740075e72d8dc2c3..87124e8dbbf65d6db3dd3c09c14e7cfd7c84a187 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -1,15 +1,17 @@ # Image -The **\** component is used to render and display images. +The **\** component is used to render and display images. -> **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. + ## Required Permissions To use online images, the application must have the **ohos.permission.INTERNET** permission. For details about how to apply for a permission, see [Declaring Permissions](../../security/accesstoken-guidelines.md). + ## Child Components Not supported @@ -19,6 +21,8 @@ Not supported Image(src: string | PixelMap | Resource) +Obtains an image from the specified source for subsequent rendering and display. + **Parameters** | Name| Type | Mandatory| Default Value| Description | @@ -47,10 +51,10 @@ Image(src: string | PixelMap | Resource) ## ImageInterpolation -| Name | Description | -| ------ | ------------------------ | -| None | Interpolation image data is not used. | -| High | The interpolation image data is used at the high level. The use of the interpolation image data may affect the image rendering speed.| +| Name | Description | +| ------ | ------------------------- | +| None | Interpolation image data is not used. | +| High | The interpolation image data is used at the high level, which may affect the image rendering speed.| | Medium | The interpolation image data is used at the medium level. | | Low | The interpolation image data is used at the low level. | @@ -63,10 +67,11 @@ Image(src: string | PixelMap | Resource) ## Events + | Name | Description | | ---------------------------------------- | ---------------------------------------- | -| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The loaded image is returned. | -| onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void) | Triggered when an exception occurs during image loading. | +| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
| +| onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
| | onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md index 0c157992c0e310acc7d6366689acde4b356e1389..0c7c4044634d3751fb653df18bb1be10d98dccaa 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md @@ -32,7 +32,7 @@ In addition to the [universal text style](ts-universal-attributes-text-style.md) | -------- | -------- | -------- | | decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None
color: Color.Black
} | | letterSpacing | number \| string | Letter spacing. | -| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
Default value: **Normal** | +| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
Default value: **TextCase.Normal**| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md index b0348580d7af8e571c2e11f941c05c8468575984..a7232b95fb0b7ab14bacf0d132ef9da0777fed95 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -1,7 +1,7 @@ # Web > **NOTE**
->This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. The **** component can be used to display web pages. @@ -18,10 +18,10 @@ Not supported Table 1 options - | Name | Type | Mandatory | Default Value | Description | - | ---------- | ------------------------------- | ---- | ---- | ------- | - | src | string | Yes | - | Address of a web page resource.| - | controller | [WebController](#webcontroller) | No | - | Controller. | + | Name | Type | Mandatory | Default Value | Description | + | ---------- | ------------------------------- | --------- | ------------- | ------------------------------- | + | src | string | Yes | - | Address of a web page resource. | + | controller | [WebController](#webcontroller) | No | - | Controller. | > **NOTE**
@@ -31,22 +31,22 @@ Not supported > - Only local audio and video are supported for playback. ## Attributes -| Name | Type | Default Value | Description | +| Name | Type | Default Value | Description | | ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | -| domStorageAccess | boolean | false | Whether to enable the DOM Storage API permission. By default, the permission is disabled.| -| fileAccess | boolean | false | Whether to enable in-application rawfile access through [$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#referencing-resources). By default, this feature is enabled.| -| fileFromUrlAccess | boolean | true | Whether to allow JavaScript scripts on web pages to access the content in [$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#referencing-resources). By default, this feature is disabled.| -| imageAccess | boolean | true | Whether to enable automatic image loading. By default, this feature is enabled. | -| javaScriptProxy | {
object: object,
name: string,
methodList: Array\,
controller: WebController
} | - | JavaScript object to be injected into the window. Methods of this object can be invoked in the window. The parameters in this attribute cannot be updated.
**object** indicates the object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.
**name** indicates the name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.
**methodList** indicates the methods of the JavaScript object to be registered at the application side.
**controller** indicates the controller.| -| javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. | -| mixedMode | [MixedMode](#mixedmode) | MixedMode.None | Whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled.| -| onlineImageAccess | boolean | true | Whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled.| -| zoomAccess | boolean | true | Whether to enable zoom gestures. By default, zoom gestures are enabled. | -| overviewModeAccess | boolean | true | Whether to use the overview mode to load web pages. By default, this mode is used. | -| databaseAccess | boolean | false | Whether to enable database access. By default, this feature is disabled. | -| cacheMode | [CacheMode](#cachemode) | CacheMode.Default | Cache mode. | -| textZoomAtio | number | 100 | Text zoom ratio of the page. The default value is **100**, which indicates 100%. | -| userAgent | string | - | User agent. | +| domStorageAccess | boolean | false | Whether to enable the DOM Storage API permission. By default, the permission is disabled. | +| fileAccess | boolean | false | Whether to enable in-application rawfile access through [$rawfile(filepath/filename)](../../ui/ui-ts-basic-resource-file-categories.md). By default, this feature is enabled. | +| fileFromUrlAccess | boolean | true | Whether to allow JavaScript scripts on web pages to access the content in [$rawfile(filepath/filename)](../../ui/ui-ts-basic-resource-file-categories.md). By default, this feature is disabled. | +| imageAccess | boolean | true | Whether to enable automatic image loading. By default, this feature is enabled. | +| javaScriptProxy | {
object: object,
name: string,
methodList: Array\,
controller: WebController
} | - | JavaScript object to be injected into the window. Methods of this object can be invoked in the window. The parameters in this attribute cannot be updated.
**object** indicates the object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.
**name** indicates the name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.
**methodList** indicates the methods of the JavaScript object to be registered at the application side.
**controller** indicates the controller. | +| javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. | +| mixedMode | [MixedMode](#mixedmode) | MixedMode.None | Whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled. | +| onlineImageAccess | boolean | true | Whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled. | +| zoomAccess | boolean | true | Whether to enable zoom gestures. By default, zoom gestures are enabled. | +| overviewModeAccess | boolean | true | Whether to use the overview mode to load web pages. By default, this mode is used. | +| databaseAccess | boolean | false | Whether to enable database access. By default, this feature is disabled. | +| cacheMode | [CacheMode](#cachemode) | CacheMode.Default | Cache mode. | +| textZoomAtio | number | 100 | Text zoom ratio of the page. The default value is **100**, which indicates 100%. | +| userAgent | string | - | User agent. | > **NOTE**
> @@ -56,8 +56,8 @@ Not supported The universal events are not supported. -| Name | Description | -| ------------------------------------------------------------ | ------------------------------------------------------------ | +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | | onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) |

Triggered when **alert()** is invoked to display an alert dialog box on the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows only the confirm operation) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.

| | onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) |

Triggered when the current page is about to exit after the user refreshes or closes the page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.

| | onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) |

Triggered when **confirm()** is invoked by the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.

| @@ -65,8 +65,8 @@ The universal events are not supported. | onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) |

Triggered when a download task starts on the web page.
**url**: URL for the download task.
**userAgent**: name of the user agent (UA) for the download task.
**contentDisposition**: Content-Disposition response header returned by the server, which may be empty.
**mimetype**: content media type (MIME) returned by the server.
**contentLength**: length of the file returned by the server.

| | onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), error: [WebResourceError](#webresourceerror) }) => void) |

Triggered when an error occurs during web page loading.
For better results, simplify the implementation logic in the callback.
**request**: encapsulation of a web page request.
**error**: encapsulation of a web page resource loading error.

| | onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), response: [WebResourceResponse](#webresourceresponse) }) => void) |

Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.
**request**: encapsulation of a web page request.
**response**: encapsulation of a web page response.

| -| onPageBegin(callback: (event?: { url: string }) => void) |

Triggered when the web page starts to be loaded. This API is triggered only for the main frame content, and not for the iframe or frameset content.
**url**: URL of the page.

| -| onPageEnd(callback: (event?: { url: string }) => void) |

Triggered when the web page loading is complete. This API is triggered only for the main frame content.
**url**: URL of the page.

| +| onPageBegin(callback: (event?: { url: string }) => void) |

Triggered when the web page starts to be loaded. This API is triggered only for the main frame content, and not for the iframe or frameset content.
**url**: URL of the page.

| +| onPageEnd(callback: (event?: { url: string }) => void) |

Triggered when the web page loading is complete. This API is triggered only for the main frame content.
**url**: URL of the page.

| | onProgressChange(callback: (event?: { newProgress: number }) => void) |

Triggered when the web page loading progress changes.
**newProgress**: new loading progress. The value is an integer ranging from 0 to 100.

| | onTitleReceive(callback: (event?: { title: string }) => void) |

Triggered when the document title of the web page is changed.
**title**: document title.

| | onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) |

Triggered when loading of the web page is complete. This callback function is used by an application to update the historical link it accessed.
**url**: URL to be accessed.
**isRefreshed**: whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.

| @@ -76,120 +76,120 @@ The universal events are not supported. ## ConsoleMessage -| Name | Description | -| ------------------------------- | ---------------------- | -| getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. | -| getMessage(): string | Obtains the log information of the **ConsoleMessage**.| -| getMessageLevel(): [MessageLevel](#messagelevel-enums) | Obtains the log information level of the **ConsoleMessage**.| -| getSourceId(): string | Obtains the path and name of the web page source file. | +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. | +| getMessage(): string | Obtains the log information of the **ConsoleMessage**. | +| getMessageLevel(): [MessageLevel](#messagelevel-enums) | Obtains the log information level of the **ConsoleMessage**. | +| getSourceId(): string | Obtains the path and name of the web page source file. | ## MessageLevel Enums -| Name | Description | -| ----- | :---- | -| Debug | Debug level.| -| Error | Error level.| -| Info | Information level.| -| Log | Log level.| -| Warn | Warning level. | +| Name | Description | +| ----- | :----------------- | +| Debug | Debug level. | +| Error | Error level. | +| Info | Information level. | +| Log | Log level. | +| Warn | Warning level. | ## JsResult Provides the result returned to the **\** component to indicate the user operation performed in the dialog box. -| Name | Description | -| --------------------- | ----------------------- | +| Name | Description | +| --------------------- | ---------------------------------------- | | handleCancel(): void |

The user's cancel operation in the dialog box.

| | handleConfirm(): void |

The user's confirm operation in the dialog box.

| ## WebResourceError -| Name | Description | -| ---------------------- | ------------ | +| Name | Description | +| ---------------------- | ---------------------------------------- | | getErrorCode(): number | Obtains the error code for resource loading. | -| getErrorInfo(): string | Obtains error information about resource loading.| +| getErrorInfo(): string | Obtains error information about resource loading. | ## WebResourceRequest -| Name | Description | -| ---------------------------------------- | -------------------- | -| getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. | -| getRequestUrl(): string | Obtains the URL of the resource request. | -| isMainFrame(): boolean | Checks whether the resource request is in the main frame. | -| isRedirect(): boolean | Checks whether the resource request is redirected by the server. | -| isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap).| +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. | +| getRequestUrl(): string | Obtains the URL of the resource request. | +| isMainFrame(): boolean | Checks whether the resource request is in the main frame. | +| isRedirect(): boolean | Checks whether the resource request is redirected by the server. | +| isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap). | ## Header Describes the request/response header returned by the **\** component. -| Name | Type | Description | -| ----------- | ------ | ------------- | -| headerKey | string | Key of the request/response header. | -| headerValue | string | Value of the request/response header.| +| Name | Type | Description | +| ----------- | ------ | ------------------------------------- | +| headerKey | string | Key of the request/response header. | +| headerValue | string | Value of the request/response header. | ## WebResourceResponse -| Name | Description | -| ---------------------------------------- | ------------------ | -| getReasonMessage(): string | Obtains the status code description of the resource response. | -| getResponseCode(): number | Obtains the status code of the resource response. | -| getResponseData(): string | Obtains the data in the resource response. | -| getResponseEncoding(): string | Obtains the encoding of the resource response. | -| getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. | -| getResponseMimeType(): string | Obtains the media (MIME) type of the resource response.| +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| getReasonMessage(): string | Obtains the status code description of the resource response. | +| getResponseCode(): number | Obtains the status code of the resource response. | +| getResponseData(): string | Obtains the data in the resource response. | +| getResponseEncoding(): string | Obtains the encoding of the resource response. | +| getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. | +| getResponseMimeType(): string | Obtains the media (MIME) type of the resource response. | ## RenderExitReason Explains why the rendering process exits. -| Name | Description | -| -------------------------- | ----------------- | -| PROCESS_ABNORMAL_TERMINATION | The rendering process exits abnormally. | -| PROCESS_WAS_KILLED | The rendering process receives a SIGKILL message or is manually terminated.| -| PROCESS_CRASHED | The rendering process crashes due to a segmentation error or other errors. | -| PROCESS_OOM | The program memory is running low. | -| PROCESS_EXIT_UNKNOWN | Other reason. | +| Name | Description | +| ---------------------------- | ---------------------------------------- | +| PROCESS_ABNORMAL_TERMINATION | The rendering process exits abnormally. | +| PROCESS_WAS_KILLED | The rendering process receives a SIGKILL message or is manually terminated. | +| PROCESS_CRASHED | The rendering process crashes due to a segmentation error or other errors. | +| PROCESS_OOM | The program memory is running low. | +| PROCESS_EXIT_UNKNOWN | Other reason. | ## MixedMode -| Name | Description | -| ---------- | ---------------------------------- | -| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded.| -| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. | -| None | HTTP and HTTPS hybrid content cannot be loaded. | +| Name | Description | +| ---------- | ---------------------------------------- | +| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded. | +| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. | +| None | HTTP and HTTPS hybrid content cannot be loaded. | ## CacheMode -| Name | Description | -| ------- | ------------------------------------ | -| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.| -| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. | -| Online | The cache is not used to load the resources. All resources are obtained from the Internet. | -| Only | The cache alone is used to load the resources. | +| Name | Description | +| ------- | ---------------------------------------- | +| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. | +| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. | +| Online | The cache is not used to load the resources. All resources are obtained from the Internet. | +| Only | The cache alone is used to load the resources. | ## FileSelectorResult Notifies the **\** component of the file selection result. -| Name | Description | -| ---------------------------------------------- | ------------------------------------------------------------ | +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | | handleFileList(fileList: Array\): void | Instructs the **\** component to select a file.
**fileList**: list of files to operate. | ## FileSelectorParam -| Name | Description | -| -------------------------------- | ------------ | -| title(): string | Title of the file selector. | -| mode(): FileSelectorMode | Mode of the file selector. | -| acceptType(): Array\ | File filtering type. | -| isCapture(): boolean | Whether multimedia capabilities are invoked.| +| Name | Description | +| ----------------------------- | ---------------------------------------- | +| title(): string | Title of the file selector. | +| mode(): FileSelectorMode | Mode of the file selector. | +| acceptType(): Array\ | File filtering type. | +| isCapture(): boolean | Whether multimedia capabilities are invoked. | ## FileSelectorMode -| Name | Description | -| -------------------- | ---------- | -| FILE_OPEN_MODE | Open and upload a file. | +| Name | Description | +| ----------------------- | ------------------------------- | +| FILE_OPEN_MODE | Open and upload a file. | | FILE_OPEN_MULTIPLE_MODE | Open and upload multiple files. | -| FILE_OPEN_FOLDER_MODE | Open and upload a folder.| -| FILE_SAVE_MODE | Save a file. | +| FILE_OPEN_FOLDER_MODE | Open and upload a folder. | +| FILE_SAVE_MODE | Save a file. | ## WebController @@ -221,15 +221,15 @@ Indicates whether a specific number of steps forward or backward can be performe - Parameters - | Name | Type | Mandatory | Default Value | Description | - | ---- | ------ | ---- | ---- | --------------------- | - | step | number | Yes | - | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward.| + | Name | Type | Mandatory | Default Value | Description | + | ---- | ------ | --------- | ------------- | ---------------------------------------- | + | step | number | Yes | - | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward. | - Return value - | Type | Description | - | ------- | --------- | - | boolean | Whether to go forward or backward from the current page.| + | Type | Description | + | ------- | ---------------------------------------- | + | boolean | Whether to go forward or backward from the current page. | ### backward @@ -245,9 +245,9 @@ Deletes a specific application JavaScript object that is registered with the win - Parameters - | Name | Type | Mandatory | Default Value | Description | - | ---- | ------ | ---- | ---- | ---------------------------------------- | - | name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side.| + | Name | Type | Mandatory | Default Value | Description | + | ---- | ------ | --------- | ------------- | ---------------------------------------- | + | name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side. | ### forward @@ -263,15 +263,15 @@ Obtains the element type of the area being clicked. - HitTestType enums - | Name | Description | - | ------------- | ------------------------ | - | EditText | Editable area. | - | Email | Email address. | - | HttpAnchor | Hyperlink where **src** is **http**. | - | HttpAnchorImg | Image with a hyperlink, where **src** is **http**.| - | Img | HTML::img tag. | - | Map | Geographical address. | - | Unknown | Unknown content. | + | Name | Description | + | ------------- | ---------------------------------------- | + | EditText | Editable area. | + | Email | Email address. | + | HttpAnchor | Hyperlink where **src** is **http**. | + | HttpAnchorImg | Image with a hyperlink, where **src** is **http**. | + | Img | HTML::img tag. | + | Map | Geographical address. | + | Unknown | Unknown content. | ### loadData @@ -285,13 +285,13 @@ If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be proces - options - | Name | Type | Mandatory | Default Value | Description | - | ---------- | ------ | ---- | ---- | ---------------------------------------- | - | data | string | Yes | - | Character string obtained after being Base64 or URL encoded. | - | mimeType | string | Yes | - | Media type (MIME). | - | encoding | string | Yes | - | Encoding type, which can be Base64 or URL. | - | baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\** component to **window.origin**.| - | historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty.| + | Name | Type | Mandatory | Default Value | Description | + | ---------- | ------ | --------- | ------------- | ---------------------------------------- | + | data | string | Yes | - | Character string obtained after being Base64 or URL encoded. | + | mimeType | string | Yes | - | Media type (MIME). | + | encoding | string | Yes | - | Encoding type, which can be Base64 or URL. | + | baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\** component to **window.origin**. | + | historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty. | ### loadUrl @@ -305,10 +305,10 @@ The object injected through **registerJavaScriptProxy** is still valid on a new - options - | Name | Type | Mandatory | Default Value | Description | - | ------- | ------------------------------ | ---- | ---- | -------------- | - | url | string | Yes | - | URL to load. | - | headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL.| + | Name | Type | Mandatory | Default Value | Description | + | ------- | -------------------------- | --------- | ------------- | ---------------------------------------- | + | url | string | Yes | - | URL to load. | + | headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL. | ### onActive @@ -336,11 +336,11 @@ Injects a JavaScript object into the window and invokes the methods of the objec - options - | Name | Type | Mandatory | Default Value | Description | - | ---------- | --------------- | ---- | ---- | ---------------------------------------- | - | object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.| - | name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.| - | methodList | Array\ | Yes | - | Methods of the JavaScript object to be registered at the application side. | + | Name | Type | Mandatory | Default Value | Description | + | ---------- | --------------- | --------- | ------------- | ---------------------------------------- | + | object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type. | + | name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side. | + | methodList | Array\ | Yes | - | Methods of the JavaScript object to be registered at the application side. | ### runJavaScript @@ -350,10 +350,10 @@ Asynchronously executes a JavaScript script. This API uses a callback to return - options - | Name | Type | Mandatory | Default Value | Description | - | -------- | ------------------------ | ---- | ---- | ---------------------------------------- | - | script | string | Yes | - | JavaScript script. | - | callback | (result: string) => void | No | - | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned.| + | Name | Type | Mandatory | Default Value | Description | + | -------- | ------------------------ | --------- | ------------- | ---------------------------------------- | + | script | string | Yes | - | JavaScript script. | + | callback | (result: string) => void | No | - | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned. | ### stop @@ -373,9 +373,9 @@ getCookieManager(): WebCookie Obtains the cookie management object of the **\** component. - Return value - | Type | Description | + | Type | Description | | --------- | ---------------------------------------- | - | WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).| + | WebCookie | Cookie management object. For details, see [WebCookie](#webcookie). | ## WebCookie Manages behavior of cookies in **\** components. All **\** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management. ### setCookie @@ -385,23 +385,23 @@ Sets the cookie. This API is synchronous. - Parameters - | Name | Type | Mandatory | Default Value | Description | - | ----- | ------ | ---- | ---- | ----------------- | - | url | string | Yes | - | URL of the cookie to set.| - | value | string | Yes | - | Value of the cookie to set. | + | Name | Type | Mandatory | Default Value | Description | + | ----- | ------ | --------- | ------------- | --------------------------- | + | url | string | Yes | - | URL of the cookie to set. | + | value | string | Yes | - | Value of the cookie to set. | - Return value - | Type | Description | - | ------- | ------------- | - | boolean | Returns **true** if the operation is successful; returns **false** otherwise.| + | Type | Description | + | ------- | ---------------------------------------- | + | boolean | Returns **true** if the operation is successful; returns **false** otherwise. | ### saveCookieSync saveCookieSync(): boolean Saves this cookie in the memory to the disk. This API is synchronous. - Return value - | Type | Description | - | ------- | -------------------- | - | boolean | Returns the operation result.| + | Type | Description | + | ------- | ----------------------------- | + | boolean | Returns the operation result. | ## Example ```ts diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md index 826be4134f929eadfeef3627f83e38dd71639095..709ea8739ba7628a3a6e0df6157a115f561de298 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md @@ -15,24 +15,24 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.
Default value: **1**| -| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.
Default value: **PanDirection.All**| -| distance | number | No| Minimum pan distance to trigger the gesture, in vp.
Default value: **5**
**NOTE**
If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.| +| Name | Type | Mandatory | Description | +| --------- | ------------ | --------- | ---------------------------------------- | +| fingers | number | No | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.
Default value: **1** | +| direction | PanDirection | No | Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.
Default value: **PanDirection.All** | +| distance | number | No | Minimum pan distance to trigger the gesture, in vp.
Default value: **5**
**NOTE**
If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized. | ## PanDirection enums -| Name| Description| -| -------- | -------- | -| All | All directions.| -| Horizontal | Horizontal panning.| -| Vertical | Vertical panning.| -| Left | Panning to the left.| -| Right | Panning to the right.| -| Up | Panning up.| -| Down | Panning down.| -| None | Panning disabled.| +| Name | Description | +| ---------- | --------------------- | +| All | All directions. | +| Horizontal | Horizontal panning. | +| Vertical | Vertical panning. | +| Left | Panning to the left. | +| Right | Panning to the right. | +| Up | Panning up. | +| Down | Panning down. | +| None | Panning disabled. | ## PanGestureOptions @@ -47,21 +47,21 @@ See the **PanGesture** parameters. **APIs** -| Name| Description| -| -------- | -------- | -| setDirection(value: PanDirection) | Sets the direction.| -| setDistance(value: number) | Sets the distance.| -| setFingers(value: number) | Sets the number of fingers.| +| Name | Description | +| --------------------------------- | --------------------------- | +| setDirection(value: PanDirection) | Sets the direction. | +| setDistance(value: number) | Sets the distance. | +| setFingers(value: number) | Sets the number of fingers. | ## Events -| Name| Description| -| -------- | -------- | -| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when a pan gesture is recognized.| -| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when the pan gesture status is updated.| -| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when the finger used for a pan gesture is lift.| -| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized.| +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when a pan gesture is recognized. | +| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when the pan gesture status is updated. | +| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when the finger used for a pan gesture is lift. | +| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. | ## Example @@ -115,13 +115,3 @@ struct PanGestureExample { } } ``` - -**Diagrams** - -Pannig to the left: - -![en-us_image_0000001174264374](figures/en-us_image_0000001174264374.png) - -Click Set PanGesture Trigger Condition to two fingers moving toward the lower left corner. - - ![en-us_image1_0000001174264374](figures/en-us_image1_0000001174264374.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md index 6ebc9a6295720671228fe1651d000fae7c609356..d480a82efc9c652dd8f1cd100cb1cbc31fe690c5 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md @@ -13,20 +13,20 @@ PinchGesture(value?: { fingers?: number, distance?: number }) **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| fingers | number | No| Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.
Default value: **2**| -| distance | number | No| Minimum recognition distance, in vp.
Default value: **3**| +| Name | Type | Mandatory | Description | +| -------- | ------ | --------- | ---------------------------------------- | +| fingers | number | No | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.
Default value: **2** | +| distance | number | No | Minimum recognition distance, in vp.
Default value: **3** | ## Events -| Name| Description| -| -------- | -------- | -| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a pinch gesture is recognized.| -| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the user moves the finger in a pinch gesture on the screen.| -| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the finger used for a pinch gesture is lift.| -| onActionCancel(event: () => void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized.| +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a pinch gesture is recognized. | +| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the user moves the finger in a pinch gesture on the screen. | +| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the finger used for a pinch gesture is lift. | +| onActionCancel(event: () => void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md index 94188dc9a29d7d39f9716df6990bc915ddf58138..e5568e192ae77712dc26e670dc8fc65af4845129 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md @@ -13,27 +13,27 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.
Default value: **1**| -| direction | SwipeDirection | No| Swipe direction.
Default value: **SwipeDirection.All**| -| speed | number | No| Minimum speed of the swipe gesture, in vp/s.
Default value: **100**| +| Name | Type | Mandatory | Description | +| --------- | -------------- | --------- | ---------------------------------------- | +| fingers | number | No | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.
Default value: **1** | +| direction | SwipeDirection | No | Swipe direction.
Default value: **SwipeDirection.All** | +| speed | number | No | Minimum speed of the swipe gesture, in vp/s.
Default value: **100** | ## SwipeDirection -| Name| Description| -| -------- | -------- | -| All | All directions.| +| Name | Description | +| ---------- | --------------------- | +| All | All directions. | | Horizontal | Horizontal direction. | -| Vertical | Vertical direction. | -| None | Swiping disabled.| +| Vertical | Vertical direction. | +| None | Swiping disabled. | ## Events -| Name| Description| -| -------- | -------- | -| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a swipe gesture is recognized.| +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a swipe gesture is recognized. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-badge.md b/en/application-dev/reference/arkui-ts/ts-container-badge.md index 2bc7c61001496b4145f7c7266a27d90f65e87813..f3dd7c6710648b165208f64c7147e6f7a9c0758a 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md @@ -24,7 +24,7 @@ Create a badge. | count | number | Yes| - | Number of notifications.| | position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| | maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.| -| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size. | +| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.| **Method 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) @@ -36,7 +36,7 @@ Creates a badge based on the given string. | -------- | -------- | -------- | -------- | -------- | | value | string | Yes| - | Prompt content.| | position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| -| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size. | +| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.| ## BadgePosition @@ -47,12 +47,13 @@ Creates a badge based on the given string. | Left | The badge is vertically centered on the left of the parent component.| ## BadgeStyle -| Name| Type| Mandatory| Default Value| Description| -| -------- | -------- | -------- | -------- | -------- | -| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color.White | Font color. | -| fontSize | number \| string | No| 10 | Font size. | -| badgeSize | number \| string | Yes| - | Badge size.| -| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color.Red | Badge color.| + +| Name | Type | Mandatory| Default Value | Description | +| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- | +| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. | +| fontSize | number \| string | No | 10 | Font size, in vp. | +| badgeSize | number \| string | No | 16 | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| +| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.Red | Badge color. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index aaecac495c9f070952c30487f7ac98bb640f868f..71aaf504d360bec1e1d7b931777d2bbbca15d0d7 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -23,30 +23,30 @@ Shape(value?: PixelMap) **Parameters** -| Name| Type| Mandatory| Default Value| Description| -| -------- | -------- | -------- | -------- | -------- | -| value | PixelMap | No| - | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target.| +| Name | Type | Mandatory | Default Value | Description | +| ----- | -------- | --------- | ------------- | ---------------------------------------- | +| value | PixelMap | No | - | Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target. | ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name| Type| Default Value| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -| viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | No| View port of the shape.| -| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No| Color of the fill area.| -| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.| -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No| Stroke color.| -| strokeDashArray | Array<Length> | [] | No| Stroke dash.| -| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.| -| strokeWidth | number \| string | 1 | No| Stroke width.| -| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| -| mesh8+ | Array<number>,number,number | [],0,0 | No| Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.| +| Name | Type | Default Value | Mandatory | Description | +| ----------------- | ---------------------------------------- | ------------------------------- | --------- | ---------------------------------------- | +| viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | No | View port of the shape. | +| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No | Color of the fill area. | +| fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | No | Opacity of the fill area. | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No | Stroke color. | +| strokeDashArray | Array<Length> | [] | No | Stroke dash. | +| strokeDashOffset | number \| string | 0 | No | Offset of the start point for drawing the stroke. | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No | Cap style of the stroke. | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No | Join style of the stroke. | +| strokeMiterLimit | number \| string | 4 | No | Limit value when the sharp angle is drawn as a miter. | +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | No | Stroke opacity. | +| strokeWidth | number \| string | 1 | No | Stroke width. | +| antiAlias | boolean | true | No | Whether anti-aliasing is enabled. | +| mesh8+ | Array<number>,number,number | [],0,0 | No | Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix. | ## Example diff --git a/en/application-dev/ui/ts-framework-directory.md b/en/application-dev/ui/ts-framework-directory.md index ce9ac122086ec353c29c44cc9796a19ed3f1deb5..359b2a196ae755d262684f9758a28d7df3f4fcfa 100644 --- a/en/application-dev/ui/ts-framework-directory.md +++ b/en/application-dev/ui/ts-framework-directory.md @@ -1,28 +1,37 @@ # Directory Structure -The following figure shows the typical directory structure of the eTS module (entry/src/main) for an application with feature abilities (FAs). +The following figure shows the typical directory structure of the **ets** module (in **entry/src/main**) for an application with feature abilities (FAs). ![en-us_image_0000001222967752](figures/en-us_image_0000001222967752.png) -Functions of the files are as follows: +The **ets** directory contains the following files: -- The Extended TypeScript (eTS) files that end with the .ets extension describe the UI layouts, styles, event interactions, and page logics. - +**.ets** files: Extended TypeScript (eTS) files that describe the UI layouts, styles, event interactions, and page logics. Functions of the folders and files are as follows: +- The **app.ets** file manages global application logics and lifecycles. + +- The **pages** directory stores all pages. + +- The **common** directory stores common code files, such as files of custom components and public methods. -- The app.ets file manages global application logics and lifecycles. -- The pages directory stores all component pages. +> **NOTE** +> +> - For details about the **resources** directory in **src/main**, see [Resource File Categories](ui-ts-basic-resource-file-categories.md). +> - TypeScript and JavaScript files can be imported as page files. + +"js" tag configuration: -- The common directory stores common code files, such as custom components and public methods. +Configure the **"js"** tag in the configuration file of your application. The **"js"** tag contains the instance name, page route, and window configuration information. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: +> **NOTE** +> +> For details about the **"js"** tag in the FA model, see [Table 22 Internal structure of the js attribute](../quick-start/package-structure.md#internal-structure-of-the-js-attribute). > -> TypeScript and JavaScript files can be imported as page files. diff --git a/en/application-dev/website.md b/en/application-dev/website.md index b9977181320d09a131a903737f69463f9cc6d3bd..f5528959daf1869f5678d1bf3c2c6add5c16b155 100644 --- a/en/application-dev/website.md +++ b/en/application-dev/website.md @@ -243,8 +243,8 @@ - [Distributed Data Object Development](database/database-distributedobject-guidelines.md) - Task Management - Background Task Management - - [Background Task Management Overview](background-task-management/background-task-overview.md) - - [Background Task Management Development](background-task-management/background-task-dev-guide.md) + - [Background Task Management Overview](task-management/background-task-overview.md) + - [Background Task Management Development](task-management/background-task-dev-guide.md) - Work Scheduler - [Work Scheduler Overview](task-management/work-scheduler-overview.md) - [Work Scheduler Development](task-management/work-scheduler-dev-guide.md) diff --git a/en/release-notes/api-change/v3.1-Release/changelog-v3.1-release.md b/en/release-notes/api-change/v3.1-Release/changelog-v3.1-release.md new file mode 100644 index 0000000000000000000000000000000000000000..597bda22e9a8564f20be1ca5dfa4d1b8d25f023c --- /dev/null +++ b/en/release-notes/api-change/v3.1-Release/changelog-v3.1-release.md @@ -0,0 +1,56 @@ +# Updates (OpenHarmony 3.1 Beta -> OpenHarmony 3.1 Release) + +### Added Validity Verification for Color Values in Color.json + +Validity verification is added for color values in the **color.json** file. The verification rules are as follows: + +- The hexadecimal color code is used in any of the following formats: + - #rgb: red(0-f) green(0-f) blue(0-f) + - #argb: transparency(0-f) red(0-f) green(0-f) blue(0-f) + - #rrggbb: red(00-ff) green(00-ff) blue(00-ff) + - #aarrggbb: transparency(00-ff) red(00-ff) green(00-ff) blue(00-ff) +- The dollar sign ($) is used to reference resources defined in the application. The format is as follows: + - $color:xxx + +**Change Impacts** + +If the verification rules are not met, an error is reported during compilation. + +**Key API/Component Changes** + +None + +### Restrictions on Declaring Multiple Data Types of State Variables + +If a **@State**, **@Provide**, **@Link**, or **@Consume** decorated state variable supports multiple data types, they must be all simple data types or references at one time. + +Example: + +```ts +@Entry +@Component +struct Index { + // Incorrect: @State message: string | Resource = 'Hello World' + @State message: string = 'Hello World' + + build() { + Row() { + Column() { + Text(`${ this.message }`) + .fontSize(50) + .fontWeight(FontWeight.Bold) + } + .width('100%') + } + .height('100%') + } +} +``` + +**Change Impacts** + +When the defined state variable type contains both the simple data types and references, an error is reported during compilation. + +**Key API/Component Changes** + +If the defined state variable type contains both the simple data types and references, change the type to one of them, as shown in the preceding sample code. diff --git a/en/release-notes/api-change/v3.1-Release/readme.md b/en/release-notes/api-change/v3.1-Release/readme.md index d84adb9e93c862893399d0c1276a2cde150a44fb..e7465982e34f079913c30cf77dd1865e5f85a3e2 100644 --- a/en/release-notes/api-change/v3.1-Release/readme.md +++ b/en/release-notes/api-change/v3.1-Release/readme.md @@ -4,3 +4,4 @@ This directory records the API changes in OpenHarmony 3.1 Release over OpenHarmo - [JS API Differences](js-apidiff-v3.1-release.md) - [Native API Differences](native-apidiff-v3.1-release.md) +- [Updates (OpenHarmony 3.1 Beta -> OpenHarmony 3.1 Release)](changelog-v3.1-release.md) diff --git a/en/website.md b/en/website.md index 7550ac898e3316557e2534f9b90fbd5c782b5035..7e6d8f34ec45142975ef8d9b9bac458bf7a81525 100644 --- a/en/website.md +++ b/en/website.md @@ -52,6 +52,7 @@ - [User IAM subsystem](release-notes/api-change/v3.1-Release/js-apidiff-user-authentication.md) - [Window manager subsystem](release-notes/api-change/v3.1-Release/js-apidiff-window.md) - [Native API Differences](release-notes/api-change/v3.1-Release/native-apidiff-v3.1-release.md) + - [Updates (OpenHarmony 3.1 Beta -> OpenHarmony 3.1 Release)](release-notes/api-change/v3.1-Release/changelog-v3.1-release.md) - Contribution - [How to Contribute](contribute/how-to-contribute.md) - [Code of Conduct](contribute/code-of-conduct.md) diff --git a/zh-cn/application-dev/Readme-CN.md b/zh-cn/application-dev/Readme-CN.md index b8173cd19dd91f08f4e4b90384f8b66adc04f7fd..64c8be1d23ebe8804b481f85db8c7840c5ef2907 100644 --- a/zh-cn/application-dev/Readme-CN.md +++ b/zh-cn/application-dev/Readme-CN.md @@ -5,7 +5,7 @@ - [了解OpenHarmony开源项目](../OpenHarmony-Overview_zh.md) - [术语](../glossary.md) - [版本说明](../release-notes/Readme.md) -- 快速开始 +- 入门 - 快速入门 - [开发准备](quick-start/start-overview.md) - [使用eTS语言开发(传统代码方式)](quick-start/start-with-ets.md) @@ -15,7 +15,6 @@ - 开发基础知识 - [应用包结构说明(FA模型)](quick-start/package-structure.md) - [应用包结构说明(Stage模型)](quick-start/stage-structure.md) - - [资源文件的分类](quick-start/basic-resource-file-categories.md) - [SysCap说明](quick-start/syscap.md) - 开发 - [Ability开发](ability/Readme-CN.md) diff --git a/zh-cn/application-dev/application-dev-guide-for-gitee.md b/zh-cn/application-dev/application-dev-guide-for-gitee.md index 7135171542ae0751a520aa8d541f8f202febea85..75ed40ce1961decb3b450dcdf1decefbf0ce889b 100644 --- a/zh-cn/application-dev/application-dev-guide-for-gitee.md +++ b/zh-cn/application-dev/application-dev-guide-for-gitee.md @@ -4,9 +4,9 @@ 在应用开发的文档中，您可以获取到如下几方面的内容： -### 快速开始 +### 入门 -[快速开始](quick-start/Readme-CN.md)可以帮助开发者了解应用开发的基本方法。 +[入门](quick-start/Readme-CN.md)可以帮助开发者了解应用开发的基本方法。 这一部分包含了快速构建首个应用的快速入门，以及开发OpenHarmony应用所必备的基础知识。 diff --git a/zh-cn/application-dev/application-dev-guide.md b/zh-cn/application-dev/application-dev-guide.md index 165521d663961eeaf6b7c6bc7ecdcac7a49176cc..0a13df31417dba40896677ed06b771f3f37966b7 100644 --- a/zh-cn/application-dev/application-dev-guide.md +++ b/zh-cn/application-dev/application-dev-guide.md @@ -4,9 +4,9 @@ 在应用开发的文档中，您可以获取到如下几方面的内容： -### 快速开始 +### 入门 -[快速开始](quick-start/start-overview.md)可以帮助开发者了解应用开发的基本方法。 +[入门](quick-start/start-overview.md)可以帮助开发者了解应用开发的基本方法。 这一部分包含了快速构建首个应用的快速入门，以及开发OpenHarmony应用所必备的基础知识。 diff --git a/zh-cn/application-dev/notification/notification-guidelines.md b/zh-cn/application-dev/notification/notification-guidelines.md index 90409fdaf50d6011b616315c2b09d060f03042ff..4c6373ab9c24e583388a085862033a3c2bbcbb45 100644 --- a/zh-cn/application-dev/notification/notification-guidelines.md +++ b/zh-cn/application-dev/notification/notification-guidelines.md @@ -118,7 +118,7 @@ var subscriber = { }, }; - Notification.subscribe(subscriber, (err, data) => { // callback形式调用异步接口 + Notification.subscribe(subscriber, (err) => { // callback形式调用异步接口 if (err.code) { console.error('===>failed to subscribe because ' + JSON.stringify(err)); return; @@ -154,7 +154,7 @@ var notificationRequest = { } //通知发送 -Notification.publish(notificationRequest) .then((data) => { +Notification.publish(notificationRequest) .then(() => { console.info('===>publish promise success req.id : ' + notificationRequest.id); }).catch((err) => { console.error('===>publish promise failed because ' + JSON.stringify(err)); @@ -223,7 +223,7 @@ var notificationRequest = { } //通知发送 -Notification.publish(notificationRequest) .then((data) => { +Notification.publish(notificationRequest) .then(() => { console.info('===>publish promise success req.id : ' + notificationRequest.id); }).catch((err) => { console.error('===>publish promise failed because ' + JSON.stringify(err)); @@ -244,8 +244,3 @@ function cancelCallback(err) { Notification.cancel(1, "label", cancelCallback) ``` - -## 相关实例 - -针对通知开发，有以下相关可供参考： -- [`Notification`：通知（eTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/common/Notification) diff --git a/zh-cn/application-dev/quick-start/Readme-CN.md b/zh-cn/application-dev/quick-start/Readme-CN.md index dacdf9e950beca5bc73b016797b660196dc523e6..bf677bee93b016fd48ac7f9e0dd8465aa206c314 100755 --- a/zh-cn/application-dev/quick-start/Readme-CN.md +++ b/zh-cn/application-dev/quick-start/Readme-CN.md @@ -1,4 +1,4 @@ -# 快速开始 +# 入门 - 快速入门 - [开发准备](start-overview.md) diff --git a/zh-cn/application-dev/reference/apis/Readme-CN.md b/zh-cn/application-dev/reference/apis/Readme-CN.md index 27adc1252d59277920d4023fe0581e6911702a2d..df6a5f6e50e374fdb7ff51ce6b259359e650704d 100644 --- a/zh-cn/application-dev/reference/apis/Readme-CN.md +++ b/zh-cn/application-dev/reference/apis/Readme-CN.md @@ -68,6 +68,9 @@ - bundle/[HapModuleInfo (HapModuleInfo)](js-apis-bundle-HapModuleInfo.md) - bundle/[Metadata (Metadata)](js-apis-bundle-Metadata.md) - bundle/[ModuleInfo (ModuleInfo)](js-apis-bundle-ModuleInfo.md) +- 应用管理 + + - [@system.package (应用管理)](js-apis-system-package.md) - UI界面 - [@ohos.animator (动画)](js-apis-animator.md) @@ -234,7 +237,6 @@ - [@system.mediaquery (媒体查询)](js-apis-system-mediaquery.md) - [@system.network (网络状态)](js-apis-system-network.md) - [@system.notification (通知消息)](js-apis-system-notification.md) - - [@system.package (应用管理)](js-apis-system-package.md) - [@system.prompt (弹窗)](js-apis-system-prompt.md) - [@system.request (上传下载)](js-apis-system-request.md) - [@system.router (页面路由)](js-apis-system-router.md) diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif index 2bb6aa6c2a2086f16ae6149e9d3e4b2340d6fe37..c3616f948289aa9a358bcd716c9731c98d1458de 100644 Binary files a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif differ diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif index 2bb6aa6c2a2086f16ae6149e9d3e4b2340d6fe37..6a5fe369467d047364f518486d452ed2ac6aba96 100644 Binary files a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif differ diff --git a/zh-cn/application-dev/reference/apis/js-apis-featureAbility.md b/zh-cn/application-dev/reference/apis/js-apis-featureAbility.md index 423a723e3f018b6df3207b3a676f36a0aba6ccc0..7daa9867160a2b92ac53cc4c129a0783fcee5d20 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-featureAbility.md +++ b/zh-cn/application-dev/reference/apis/js-apis-featureAbility.md @@ -36,7 +36,7 @@ startAbility(parameter: StartAbilityParameter, callback: AsyncCallback\) import featureAbility from '@ohos.ability.featureAbility' import wantConstant from '@ohos.ability.wantConstant' featureAbility.startAbility( - { + { want: { action: "", @@ -49,6 +49,9 @@ featureAbility.startAbility( uri: "" }, }, + (err, data) => { + console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data)) + } ); ``` @@ -262,6 +265,9 @@ featureAbility.terminateSelfWithResult( } }, }, + (err) => { + console.info("err: " + JSON.stringify(err)) + } ); ``` @@ -340,7 +346,11 @@ hasWindowFocus(callback: AsyncCallback\): void ```javascript import featureAbility from '@ohos.ability.featureAbility'; -featureAbility.hasWindowFocus() +featureAbility.hasWindowFocus( + (err, data) => { + console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data)) + } +) ``` @@ -388,7 +398,11 @@ getWant(callback: AsyncCallback\): void ```javascript import featureAbility from '@ohos.ability.featureAbility'; -featureAbility.getWant() +featureAbility.getWant( + (err, data) => { + console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data)) + } +) ``` @@ -458,7 +472,11 @@ terminateSelf(callback: AsyncCallback\): void ```javascript import featureAbility from '@ohos.ability.featureAbility'; -featureAbility.terminateSelf() +featureAbility.terminateSelf( + (err) => { + console.info("err: " + JSON.stringify(err)) + } +) ``` @@ -595,8 +613,8 @@ var connId = featureAbility.connectAbility( }, ); var result = featureAbility.disconnectAbility(connId, - (error,data) => { - console.log('featureAbilityTest DisConnectJsSameBundleName result errCode : ' + error.code + " data: " + data) + (error) => { + console.log('featureAbilityTest DisConnectJsSameBundleName result errCode : ' + error.code) }, ); ``` @@ -670,7 +688,11 @@ getWindow(callback: AsyncCallback\): void **示例：** ```javascript -featureAbility.getWindow() +featureAbility.getWindow( + (err, data) => { + console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data)) + } +) ``` ## featureAbility.getWindow7+ diff --git a/zh-cn/application-dev/reference/apis/js-apis-inputmethod.md b/zh-cn/application-dev/reference/apis/js-apis-inputmethod.md index be30bb4222803d71b6ae98a8eecb1631c53e668a..db7024c5ff5defa0b621ab906782caac26038e61 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-inputmethod.md +++ b/zh-cn/application-dev/reference/apis/js-apis-inputmethod.md @@ -1,215 +1,238 @@ # 输入法框架 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 +本模块提供对输入法框架的管理，包括隐藏输入法、查询已安装的输入法列表和拉起选择输入法弹窗。 +> **说明：** +> +> 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 ## 导入模块 -``` +```js import inputMethod from '@ohos.inputmethod'; ``` -## inputMethod6+ +## 常量 常量值。 -**系统能力**：以下各项对应的系统能力均为SystemCapability.Miscservices.InputMethodFramework - -| 名称 | 参数类型 | 可读 | 可写 | 说明 | -| -------- | -------- | -------- | -------- | -------- | -| MAX_TYPE_NUM | number | 是 | 否 | 可支持的最大输入法个数。 | +**系统能力：** SystemCapability.Miscservices.InputMethodFramework +| 名称 | 参数类型 | 常量值 | 说明 | +| -------- | -------- | ---------- | -------- | +| MAX_TYPE_NUM | number | 128 | 可支持的最大输入法个数。 | -## InputMethodProperty6+ +## InputMethodProperty 输入法应用属性。 -**系统能力**：以下各项对应的系统能力均为SystemCapability.Miscservices.InputMethodFramework +**系统能力：** SystemCapability.Miscservices.InputMethodFramework | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| packageName | string | 是 | 否 | 包名。 | -| methodId | string | 是 | 否 | Ability名。 | +| packageName | string | 是 | 否 | 输入法包名。 | +| methodId | string | 是 | 否 | 输入法唯一标识。 | ## inputMethod.getInputMethodController getInputMethodController(): InputMethodController -获取客户端实例[InputMethodController](#InputMethodController)。 +获取客户端实例[InputMethodController](#inputmethodcontroller)。 -**系统能力**：SystemCapability.Miscservices.InputMethodFramework +**系统能力：** SystemCapability.Miscservices.InputMethodFramework **返回值：** - | 类型 | 说明 | - | -------- | -------- | - | [InputMethodController](#InputMethodController) | 回调返回当前客户端实例。 | +| 类型 | 说明 | +| -------- | -------- | +| [InputMethodController](#inputmethodcontroller) | 返回当前客户端实例。 | **示例：** ```js - var InputMethodController = inputMethod.getInputMethodController(); +let inputMethodController = inputMethod.getInputMethodController(); ``` -## inputMethod.getInputMethodSetting6+ +## inputMethod.getInputMethodSetting getInputMethodSetting(): InputMethodSetting -获取客户端设置实例[InputMethodSetting](#InputMethodSetting)。 +获取客户端设置实例[InputMethodSetting](#inputmethodsetting)。 -**系统能力**： SystemCapability.Miscservices.InputMethodFramework +**系统能力：** SystemCapability.Miscservices.InputMethodFramework **返回值：** -| 类型 | 说明 | -| ----------------------------------------- | ---------------------------- | -| [InputMethodSetting](#InputMethodSetting) | 回调返回当前客户端设置实例。 | - +| 类型 | 说明 | +| ----------------------------------------- | ------------------------ | +| [InputMethodSetting](#inputmethodsetting) | 返回当前客户端设置实例。 | **示例：** - + ```js - var InputMethodSetting = inputMethod.getInputMethodSetting(); +let inputMethodSetting = inputMethod.getInputMethodSetting(); ``` ## InputMethodController -下列API示例中都需使用[getInputMethodController](#getInputMethodController)回调获取到InputMethodController实例，再通过此实例调用对应方法。 +下列API示例中都需使用[getInputMethodController](#inputmethodgetinputmethodcontroller)回调获取到InputMethodController实例，再通过此实例调用对应方法。 ### stopInput stopInput(callback: AsyncCallback<boolean>): void -隐藏输入法。 +结束输入法会话。使用callback异步回调。 -**系统能力**：SystemCapability.Miscservices.InputMethodFramework +**系统能力：** SystemCapability.Miscservices.InputMethodFramework **参数：** | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | -------- | -------- | -| callback | AsyncCallback<boolean> | 是 | 返回输入法隐藏是否成功。 | +| callback | AsyncCallback<boolean> | 是 | 回调函数，返回结束输入法会话是否成功的结果。true表示结束输入法会话成功；false表示结束输入法会话失败。 | **示例：** ```js - InputMethodController.stopInput((error)=>{ - console.info('stopInput'); - }); +inputMethodController.stopInput((error, result) => { + if (error) { + console.error('Failed to stop inputmethod session: ' + JSON.stringify(error)); + return; + } + if (result) { + console.info('Succeeded in stopping inputmethod session.'); + } else { + console.error('Failed to stop inputmethod session.'); + } +}); ``` ### stopInput stopInput(): Promise<boolean> -隐藏输入法。 +结束输入法会话。使用Promise异步回调。 -**系统能力**： SystemCapability.Miscservices.InputMethodFramework +**系统能力：** SystemCapability.Miscservices.InputMethodFramework **返回值：** | 类型 | 说明 | | -------- | -------- | -| Promise<boolean> | 返回输入法隐藏是否成功。 | +| Promise<boolean> | Promise对象，返回结束输入法会话是否成功的结果。true表示结束输入法会话成功；false表示结束输入法会话失败。 | **示例：** - ```js - var isSuccess = InputMethodController.stopInput(); - console.info('stopInput isSuccess = ' + isSuccess); +inputMethodController.stopInput().then((result) => { + if (result) { + console.info('Succeeded in stopping inputmethod session.'); + } else { + console.error('Failed to stop inputmethod session'); + } +}) ``` -## InputMethodSetting6+ +## InputMethodSetting -下列API示例中都需使用[getInputMethodSetting](#getInputMethodSetting)回调获取到InputMethodSetting实例，再通过此实例调用对应方法。 +下列API示例中都需使用[getInputMethodSetting](#inputmethodgetinputmethodsetting)回调获取到InputMethodSetting实例，再通过此实例调用对应方法。 ### listInputMethod listInputMethod(callback: AsyncCallback<Array<InputMethodProperty>>): void -查询已安装的输入法列表。 +查询已安装的输入法列表。使用callback异步回调。 -**系统能力**： SystemCapability.Miscservices.InputMethodFramework +**系统能力：** SystemCapability.Miscservices.InputMethodFramework **参数：** + | 参数名 | 类型 | 必填 | 说明 | | -------- | -------------------------------------------------- | ---- | ---------------------- | -| callback | Array<[InputMethodProperty](#InputMethodProperty)> | 是 | 返回已安装输入法列表。 | +| callback | Array<[InputMethodProperty](#inputmethodproperty)> | 是 | 回调函数，返回已安装的输入法列表。 | **示例：** - + ```js - InputMethodSetting.listInputMethod((properties)=>{ - for (var i = 0;i < properties.length; i++) { - var property = properties[i]; - console.info(property.packageName + "/" + property.methodId); +inputMethodSetting.listInputMethod((err, data) => { + if(err) { + console.error('Failed to list inputmethods: ' + JSON.stringify(err)); + return; } - }); + console.log('Succeeded in listing inputmethods, data: ' + JSON.stringify(data)); + }); ``` ### listInputMethod listInputMethod(): Promise<Array<InputMethodProperty>> -查询已安装的输入法列表。 +查询已安装的输入法列表。使用Promise异步回调。 -**系统能力**： SystemCapability.Miscservices.InputMethodFramework +**系统能力：** SystemCapability.Miscservices.InputMethodFramework **返回值：** + | 类型 | 说明 | | ----------------------------------------------------------- | ---------------------- | -| Promise> | 返回已安装输入法列表。 | +| Promise> | Promise对象，返回已安装的输入法列表。| **示例：** - + ```js - var properties = InputMethodSetting.listInputMethod(); - for (var i = 0;i < properties.length; i++) { - var property = properties[i]; - console.info(property.packageName + "/" + property.methodId); - } +inputMethodSetting.listInputMethod().then((data) => { + console.info('Succeeded in listing inputMethod.'); +}).catch((err) => { + console.error('Failed to list inputMethod: ' + JSON.stringify(err)); +}) ``` ### displayOptionalInputMethod displayOptionalInputMethod(callback: AsyncCallback<void>): void -显示输入法选择对话框。 +显示选择输入法弹窗。使用callback异步回调。 -**系统能力**： SystemCapability.Miscservices.InputMethodFramework +**系统能力：** SystemCapability.Miscservices.InputMethodFramework **参数：** | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | -------- | -------- | -| callback | AsyncCallback<void> | 是 | 回调函数。 | +| callback | AsyncCallback<void> | 是 | 回调函数。当选择输入法弹窗显示成功。err为undefined，否则为错误对象。 | **示例：** ```js - InputMethodSetting.displayOptionalInputMethod(()=>{ - console.info('displayOptionalInputMethod is called'); - }); +inputMethodSetting.displayOptionalInputMethod((err) => { + if (err) { + console.error('Failed to display optionalInputMethod:' + JSON.stringify(err)); + return; + } + console.info('Succeeded in displaying optionalInputMethod.'); +}); ``` ### displayOptionalInputMethod - displayOptionalInputMethod(): Promise<void> +displayOptionalInputMethod(): Promise<void> - 显示输入法选择对话框。 +显示选择输入法弹窗。使用Promise异步回调。 - **系统能力**： SystemCapability.Miscservices.InputMethodFramework +**系统能力：** SystemCapability.Miscservices.InputMethodFramework **返回值：** | 类型 | 说明 | | -------- | -------- | -| Promise<void> | 回调函数。 | +| Promise<void> | 无返回结果的Promise对象。 | **示例：** - + ```js - InputMethodSetting.displayOptionalInputMethod(); +inputMethodSetting.displayOptionalInputMethod().then(() => { + console.info('Succeeded in displaying optionalInputMethod.'); +}).catch((err) => { + console.error('Failed to display optionalInputMethod: ' + JSON.stringify(err)); +}) ``` \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-package.md b/zh-cn/application-dev/reference/apis/js-apis-system-package.md index b8138d9d985f899aa02592ae330f9e195e7008cd..1cacf1afb334247c7e9f5c9f29c1f7ecac719c19 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-system-package.md +++ b/zh-cn/application-dev/reference/apis/js-apis-system-package.md @@ -3,8 +3,6 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > -> - 从API Version 7 开始，该接口不再维护，推荐使用新接口[`@ohos.bundle`](js-apis-Bundle.md)。 -> > - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-time.md b/zh-cn/application-dev/reference/apis/js-apis-system-time.md index c34f72f04d7d2dc04795da43569f38c9801a9e15..425d261d08a8c2fee4409d71c97372981dc7b1c9 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-system-time.md +++ b/zh-cn/application-dev/reference/apis/js-apis-system-time.md @@ -1,24 +1,22 @@ -# 设置系统时间 +# 设置系统时间、时区 -本模块用来设置、获取当前系统时间，设置、获取当前系统日期和设置、获取当前系统时区。 +本模块用来设置、获取当前系统时间、系统日期和系统时区。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** +> > 本模块首批接口从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 - ## 导入模块 - -``` +```js import systemTime from '@ohos.systemTime'; ``` - ## systemTime.setTime setTime(time : number, callback : AsyncCallback<void>) : void -设置系统时间。 +设置系统时间，使用callback异步回调。 **需要权限：** ohos.permission.SET_TIME @@ -26,31 +24,30 @@ setTime(time : number, callback : AsyncCallback<void>) : void **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | time | number | 是 | 目标时间戳（ms）。 | - | callback | AsyncCallback<void> | 是 | 回调函数，可以在回调函数中处理接口返回值。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| time | number | 是 | 目标时间戳（ms）。 | +| callback | AsyncCallback<void> | 是 | 回调函数。 | **示例：** - - ```js - // time对应的时间为2021-01-20 02:36:25 - var time = 1611081385000; - systemTime.setTime(time, (error, data) => { - if (error) { - console.error(`failed to systemTime.setTime because ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.setTime success data : ` + JSON.stringify(data)); - }); - ``` +```js +// time对应的时间为2021-01-20 02:36:25 +let time = 1611081385000; +systemTime.setTime(time, (error) => { + if (error) { + console.error(`Failed to set systemTime. Cause:` + JSON.stringify(error)); + return; + } + console.log('Succeeded in setting systemTime.'); +}); +``` ## systemTime.setTime setTime(time : number) : Promise<void> -设置系统时间。 +设置系统时间，使用Promise异步回调。 **需要权限：** ohos.permission.SET_TIME @@ -58,211 +55,204 @@ setTime(time : number) : Promise<void> **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | time | number | 是 | 目标时间戳（ms）。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| time | number | 是 | 目标时间戳（ms）。 | **返回值：** - | 类型 | 说明 | - | -------- | -------- | - | Promise<void> | 返回的异步回调函数。 | +| 类型 | 说明 | +| -------- | -------- | +| Promise<void> | 无返回结果的Promise对象。 | **示例：** - - ```js - // time对应的时间为2021-01-20 02:36:25 - var time = 1611081385000; - systemTime.setTime(time).then((data) => { - console.log(`systemTime.setTime success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.setTime because ` + JSON.stringify(error)); - }); - ``` +```js +// time对应的时间为2021-01-20 02:36:25 +let time = 1611081385000; +systemTime.setTime(time).then(() => { + console.log('Succeeded in setting systemTime.'); +}).catch((error) => { + console.error(`Failed to set systemTime. Cause:` + JSON.stringify(error)); +}); +``` ## systemTime.getCurrentTime8+ getCurrentTime(isNano?: boolean, callback: AsyncCallback<number>): void -获取自 Unix 纪元以来经过的时间，使用callback形式返回结果。 +获取自Unix纪元以来经过的时间，使用callback异步回调。 **系统能力：** SystemCapability.MiscServices.Time **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | - | callback | AsyncCallback<number> | 是 | 回调函数，返回自 Unix 纪元以来经过的时间。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | +| callback | AsyncCallback<number> | 是 | 回调函数，返回自Unix纪元以来经过的时间。 | **示例：** - - ```js - systemTime.getCurrentTime(true, (error, data) => { - if (error) { - console.error(`failed to systemTime.getCurrentTime because ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.getCurrentTime success data : ` + JSON.stringify(data)); - }); - ``` +```js +systemTime.getCurrentTime(true, (error, data) => { + if (error) { + console.error(`Failed to get systemTime. Cause:` + JSON.stringify(error)); + return; + } + console.log(`Succeeded in getting systemTime.Data: ` + JSON.stringify(data)); +}); +``` ## systemTime.getCurrentTime8+ getCurrentTime(isNano?: boolean): Promise<number> -获取自 Unix 纪元以来经过的时间，使用Promise形式返回结果。 +获取自Unix纪元以来经过的时间，使用Promise异步回调。 **系统能力：** SystemCapability.MiscServices.Time **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | **返回值：** - | 类型 | 说明 | - | -------- | -------- | - | Promise<number> | 以Promise形式返回结果，返回自 Unix 纪元以来经过的时间。 | +| 类型 | 说明 | +| -------- | -------- | +| Promise<number> | Promise对象，返回自Unix纪元以来经过的时间。 | **示例：** - - ```js - systemTime.getCurrentTime().then((data) => { - console.log(`systemTime.getCurrentTime success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.getCurrentTime because ` + JSON.stringify(error)); - }); - ``` +```js +systemTime.getCurrentTime().then((data) => { + console.log(`Succeeded in getting systemTime.Data: ` + JSON.stringify(data)); +}).catch((error) => { + console.error(`Failed to get systemTime. Cause:` + JSON.stringify(error)); +}); +``` ## systemTime.getRealActiveTime8+ getRealActiveTime(isNano?: boolean, callback: AsyncCallback<number>): void -获取自系统启动以来经过的时间，不包括深度睡眠时间，使用callback形式返回结果。 +获取自系统启动以来经过的时间，不包括深度睡眠时间，使用callback异步回调。 **系统能力：** SystemCapability.MiscServices.Time **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | - | callback | AsyncCallback<number> | 是 | 回调函数，返回自系统启动以来经过的时间，但不包括深度睡眠时间。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | +| callback | AsyncCallback<number> | 是 | 回调函数，返回自系统启动以来经过的时间，但不包括深度睡眠时间。 | **示例：** - - ```js - systemTime.getRealActiveTime(true, (error, data) => { - if (error) { - console.error(`failed to systemTime.getRealActiveTimebecause ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data)); - }); - ``` +```js +systemTime.getRealActiveTime(true, (error, data) => { + if (error) { + console.error(`Failed to get real active systemTime. Cause:` + JSON.stringify(error)); + return; + } + console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data)); +}); +``` ## systemTime.getRealActiveTime8+ getRealActiveTime(isNano?: boolean): Promise<number> -获取自系统启动以来经过的时间，不包括深度睡眠时间，使用Promise形式返回结果。 +获取自系统启动以来经过的时间，不包括深度睡眠时间，使用Promise异步回调。 **系统能力：** SystemCapability.MiscServices.Time **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | **返回值：** - | 类型 | 说明 | - | -------- | -------- | - | Promise<number> | 以Promise形式返回结果，返回自系统启动以来经过的时间，但不包括深度睡眠时间。 | +| 类型 | 说明 | +| -------- | -------- | +| Promise<number> | Promise对象，返回自系统启动以来经过的时间，但不包括深度睡眠时间。 | **示例：** - - ```js - systemTime.getRealActiveTime().then((data) => { - console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.getRealActiveTime because ` + JSON.stringify(error)); - }); - ``` +```js +systemTime.getRealActiveTime().then((data) => { + console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data)); +}).catch((error) => { + console.error(`Failed to get real active systemTime. Cause:` + JSON.stringify(error)); +}); +``` ## systemTime.getRealTime8+ getRealTime(isNano?: boolean, callback: AsyncCallback<number>): void -获取自系统启动以来经过的时间，包括深度睡眠时间，使用callback形式返回结果。 +获取自系统启动以来经过的时间，包括深度睡眠时间，使用callback异步回调。 **系统能力：** SystemCapability.MiscServices.Time **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | - | callback | AsyncCallback<number> | 是 | 回调函数，返回自系统启动以来经过的时间，包括深度睡眠时间。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | +| callback | AsyncCallback<number> | 是 | 回调函数，返回自系统启动以来经过的时间，包括深度睡眠时间。 | **示例：** - - ```js - systemTime.getRealTime(true, (error, data) => { - if (error) { - console.error(`failed to systemTime.getRealTime because ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.getRealTime success data: ` + JSON.stringify(data)); - }); - ``` +```js +systemTime.getRealTime(true, (error, data) => { + if (error) { + console.error(`Failed to get real systemTime. Cause:` + JSON.stringify(error)); + return; + } + console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data)); +}); +``` ## systemTime.getRealTime8+ getRealTime(isNano?: boolean): Promise<number> -获取自系统启动以来经过的时间，包括深度睡眠时间，使用Promise形式返回结果。 +获取自系统启动以来经过的时间，包括深度睡眠时间，使用Promise异步回调。 **系统能力：** SystemCapability.MiscServices.Time **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | **返回值：** - | 类型 | 说明 | - | -------- | -------- | - | Promise<number> | 以Promise形式返回结果，返回自系统启动以来经过的时间，包括深度睡眠时间。 | +| 类型 | 说明 | +| -------- | -------- | +| Promise<number> | Promise对象，返回自系统启动以来经过的时间，包括深度睡眠时间。 | **示例：** - - ```js - systemTime.getRealTime().then((data) => { - console.log(`systemTime.getRealTime success data: ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.getRealTime because ` + JSON.stringify(error)); - }); - ``` +```js +systemTime.getRealTime().then((data) => { + console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data)); +}).catch((error) => { + console.error(`Failed to get real systemTime. Cause:` + JSON.stringify(error)); +}); +``` ## systemTime.setDate setDate(date: Date, callback: AsyncCallback<void>): void -设置系统日期，使用callback形式返回结果。 +设置系统日期，使用callback异步回调。 **需要权限：** ohos.permission.SET_TIME @@ -270,30 +260,29 @@ setDate(date: Date, callback: AsyncCallback<void>): void **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | date | Date | 是 | 目标日期。 | - | callback | AsyncCallback<void> | 是 | 回调函数，可以在回调函数中处理接口返回值。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| date | Date | 是 | 目标日期。 | +| callback | AsyncCallback<void> | 是 | 回调函数。 | **示例：** - - ```js - var data = new Date("October 13, 2020 11:13:00"); - systemTime.setDate(data,(error, data) => { - if (error) { - console.error('failed to systemTime.setDate because ' + JSON.stringify(error)); - return; - } - console.info('systemTime.setDate success data : ' + JSON.stringify(data)); - }); - ``` +```js +let data = new Date("October 13, 2020 11:13:00"); +systemTime.setDate(data,(error) => { + if (error) { + console.error('Failed to set systemDate. Cause: ' + JSON.stringify(error)); + return; +} + console.info('Succeeded in setting systemDate.'); +}); +``` ## systemTime.setDate setDate(date: Date): Promise<void> -设置系统日期，使用Promise形式返回结果。 +设置系统日期，使用Promise异步回调。 **需要权限：** ohos.permission.SET_TIME @@ -301,85 +290,82 @@ setDate(date: Date): Promise<void> **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | date | Date | 是 | 目标日期。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| date | Date | 是 | 目标日期。 | **返回值：** - | 类型 | 说明 | - | -------- | -------- | - | Promise<void> | 返回的异步回调函数。 | +| 类型 | 说明 | +| -------- | -------- | +| Promise<void> | 无返回结果的Promise对象。 | **示例：** - - ```js - var data = new Date("October 13, 2020 11:13:00"); - systemTime.setDate(data).then((value) => { - console.log(`systemTime.setDate success data : ` + JSON.stringify(value)); - }).catch((error) => { - console.error(`failed to systemTime.setDate because: ` + JSON.stringify(error)); - }); - ``` +```js +let data = new Date("October 13, 2020 11:13:00"); +systemTime.setDate(data).then(() => { + console.log('Succeeded in setting systemDate.'); +}).catch((error) => { + console.error(`Failed to set systemDate. Cause: ` + JSON.stringify(error)); +}); +``` ## systemTime.getDate8+ getDate(callback: AsyncCallback<Date>): void -获取当前系统日期，使用callback形式返回结果。 +获取当前系统日期，使用callback异步回调。 **系统能力：** SystemCapability.MiscServices.Time **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | callback | AsyncCallback<Date> | 是 | 回调函数，返回当前系统日期。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| callback | AsyncCallback<Date> | 是 | 回调函数，返回当前系统日期。 | **示例：** - - ```js - systemTime.getDate((error, data) => { - if (error) { - console.error(`failed to systemTime.getDate because ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.getDate success data : ` + JSON.stringify(data)); - }); - ``` +```js +systemTime.getDate((error, data) => { + if (error) { + console.error(`Failed to get systemDate. Cause: ` + JSON.stringify(error)); + return; + } + console.log(`Succeeded in getting systemDate. Data: ` + JSON.stringify(data)); +}); +``` ## systemTime.getDate8+ getDate(): Promise<Date> -获取当前系统日期，使用Promise形式返回结果。 +获取当前系统日期，使用Promise异步回调。 **系统能力：** SystemCapability.MiscServices.Time **返回值：** - | 类型 | 说明 | - | -------- | -------- | - | Promise<Date> | 以Promise形式返回结果，返回当前系统日期。 | +| 类型 | 说明 | +| -------- | -------- | +| Promise<Date> | Promise对象，返回当前系统日期。 | **示例：** - - ```js - systemTime.getDate().then((data) => { - console.log(`systemTime.getDate success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.getDate because ` + JSON.stringify(error)); - }); - ``` +```js +systemTime.getDate().then((data) => { + console.log(`Succeeded in getting systemDate. Data: ` + JSON.stringify(data)); +}).catch((error) => { + console.error(`Failed to get systemDate. Cause: ` + JSON.stringify(error)); +}); +``` ## systemTime.setTimezone setTimezone(timezone: string, callback: AsyncCallback<void>): void -设置系统时区。 +设置系统时区，使用callback异步回调。 **需要权限：** ohos.permission.SET_TIME_ZONE @@ -387,29 +373,28 @@ setTimezone(timezone: string, callback: AsyncCallback<void>): void **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | timezone | string | 是 | 系统时区。 | - | callback | AsyncCallback<void> | 是 | 回调函数，可以在回调函数中处理接口返回值。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| timezone | string | 是 | 系统时区。 | +| callback | AsyncCallback<void> | 是 | 回调函数。 | **示例：** - - ```js - systemTime.setTimezone('Asia/Shanghai', (error, data) => { - if (error) { - console.error('failed to systemTime.setTimezone because ' + JSON.stringify(error)); - return; - } - console.info('SystemTimePlugin systemTime.setTimezone success data : ' + JSON.stringify(data)); - }); - ``` +```js +systemTime.setTimezone('Asia/Shanghai', (error) => { + if (error) { + console.error('Failed to set systemTimeZone. Cause: ' + JSON.stringify(error)); + return; + } + console.info('Succeeded in setting systemTimeZone.'); +}); +``` ## systemTime.setTimezone setTimezone(timezone: string): Promise<void> -设置系统时区。 +设置系统时区，使用Promise异步回调。 **需要权限：** ohos.permission.SET_TIME_ZONE @@ -417,74 +402,72 @@ setTimezone(timezone: string): Promise<void> **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | timezone | string | 是 | 系统时区。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| timezone | string | 是 | 系统时区。 | **返回值：** - | 类型 | 说明 | - | -------- | -------- | - | Promise<void> | 返回的异步回调函数。 | +| 类型 | 说明 | +| -------- | -------- | +| Promise<void> | 无返回结果的Promise对象。 | **示例：** - - ```js - systemTime.setTimezone('Asia/Shanghai').then((data) => { - console.log(`systemTime.setTimezone success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.setTimezone because: ` + JSON.stringify(error)); - }); - ``` +```js +systemTime.setTimezone('Asia/Shanghai').then(() => { + console.log('Succeeded in setting systemTimeZone.'); +}).catch((error) => { + console.error(`Failed to set systemTimeZone. Cause: ` + JSON.stringify(error)); +}); +``` ## systemTime.getTimezone8+ getTimezone(callback: AsyncCallback<string>): void -获取系统时区，使用callback形式返回结果。 +获取系统时区，使用callback异步回调。 **系统能力：** SystemCapability.MiscServices.Time **参数：** - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | callback | AsyncCallback<string> | 是 | 回调函数，返回系统时区。 | +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| callback | AsyncCallback<string> | 是 | 回调函数，返回系统时区。 | **示例：** - - ```js - systemTime.getTimezone((error, data) => { - if (error) { - console.error(`failed to systemTime.getTimezone because ` + JSON.stringify(error)); - return; - } - console.log(`systemTime.getTimezone success data : ` + JSON.stringify(data)); - }); - ``` +```js +systemTime.getTimezone((error, data) => { + if (error) { + console.error(`Failed to get systemTimeZone. Cause: ` + JSON.stringify(error)); + return; + } + console.log(`Succeeded in getting systemTimeZone. Data: ` + JSON.stringify(data)); +}); +``` ## systemTime.getTimezone8+ getTimezone(): Promise<string> -获取系统时区，使用Promise形式返回结果。 +获取系统时区，使用Promise异步回调。 **系统能力：** SystemCapability.MiscServices.Time **返回值：** - | 类型 | 说明 | - | -------- | -------- | - | Promise<string> | 以Promise形式返回结果，返回系统时区。 | +| 类型 | 说明 | +| -------- | -------- | +| Promise<string> | Promise对象，返回系统时区。 | **示例：** - - ```js - systemTime.getTimezone().then((data) => { - console.log(`systemTime.getTimezone success data : ` + JSON.stringify(data)); - }).catch((error) => { - console.error(`failed to systemTime.getTimezone because ` + JSON.stringify(error)); - }); - ``` + +```js +systemTime.getTimezone().then((data) => { + console.log(`Succeeded in getting systemTimeZone. Data: ` + JSON.stringify(data)); +}).catch((error) => { + console.error(`Failed to get systemTimeZone. Cause: ` + JSON.stringify(error)); +}); +``` \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pickerview1.gif b/zh-cn/application-dev/reference/arkui-js/figures/pickerview1.gif new file mode 100644 index 0000000000000000000000000000000000000000..dc71f1453d4bc1349446da9139f611c3855a93b7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/pickerview1.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pickerview2.gif b/zh-cn/application-dev/reference/arkui-js/figures/pickerview2.gif new file mode 100644 index 0000000000000000000000000000000000000000..e272b74a3bdd438b98ac905cc33757649b27fc70 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/pickerview2.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pickerview3.gif b/zh-cn/application-dev/reference/arkui-js/figures/pickerview3.gif new file mode 100644 index 0000000000000000000000000000000000000000..0e028d05a8bb9b28dd8be35949926cb4ae603002 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/pickerview3.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pickerview4.gif b/zh-cn/application-dev/reference/arkui-js/figures/pickerview4.gif new file mode 100644 index 0000000000000000000000000000000000000000..4a31311b842f6783fe18c2ba8c64899f76400ba9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/pickerview4.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pickerview5.gif b/zh-cn/application-dev/reference/arkui-js/figures/pickerview5.gif new file mode 100644 index 0000000000000000000000000000000000000000..9c17863bafe1ea5cbdd7fa663ba7dfad8e4f6e45 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/pickerview5.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/rainbow.gif b/zh-cn/application-dev/reference/arkui-js/figures/rainbow.gif new file mode 100644 index 0000000000000000000000000000000000000000..2dd14c106005c014e3daa8b6132f610280d06516 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/rainbow.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/slider.png b/zh-cn/application-dev/reference/arkui-js/figures/slider.png new file mode 100644 index 0000000000000000000000000000000000000000..be1ee572a931ec2f06614e5f17c5616eba462e85 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/slider.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/stepper.gif b/zh-cn/application-dev/reference/arkui-js/figures/stepper.gif new file mode 100644 index 0000000000000000000000000000000000000000..61598031784b8b50ff64fc4110e124739599f308 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/stepper.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/switch.gif b/zh-cn/application-dev/reference/arkui-js/figures/switch.gif new file mode 100644 index 0000000000000000000000000000000000000000..3748e5f5ffce5c691fb5a788cecdd94b217e4a73 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/switch.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/text.png b/zh-cn/application-dev/reference/arkui-js/figures/text.png new file mode 100644 index 0000000000000000000000000000000000000000..65f36bddf4015f870e67edf7a96d1457014d1b3c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/text.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125114.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125114.gif deleted file mode 100644 index f4d097a34aef9e583651d11133dff575345f0272..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125114.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284934.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284934.gif deleted file mode 100644 index 6168a14aa67c866abf6185ba3a3c2ae9f595153c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284934.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167823076.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167823076.png deleted file mode 100644 index 495f967777f91ce6e654c278683807ef6560809c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167823076.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324709.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324709.png deleted file mode 100644 index d0167fe6773371fa70d8bf32c3a3953ed1e1455b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324709.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324845.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324845.png deleted file mode 100644 index e108f5f8f2e096b319ef5097145ab43f2ad97594..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324845.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001176075554.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001176075554.gif new file mode 100644 index 0000000000000000000000000000000000000000..16e7ff213bd5caf5a9802001d3ced2996c66e0bc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001176075554.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213103299.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213103299.png deleted file mode 100644 index e506fd8f37b0e522d5925b509def595e5db653c3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001213103299.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md index 49040e95f95cac8596408fb800473c8c0fb8ce9a..87ec72e3157beb61da329447531bf8103a030814 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md @@ -1,9 +1,9 @@ # button -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。 +按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。 ## 子组件 @@ -15,13 +15,13 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| type | string | - | 否 | 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：
- capsule：胶囊型按钮，带圆角按钮，有背景色和文本；
- circle：圆形按钮，支持放置图标；
- text：文本按钮，仅包含文本显示；
- arc：弧形按钮，仅支持智能穿戴；
- download：下载按钮，额外增加下载进度条功能。 | -| value | string | - | 否 | button的文本值。 | -| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 | -| placement5+ | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：
- start：图标位于文本起始处；
- end：图标位于文本结束处；
- top：图标位于文本上方；
- bottom：图标位于文本下方。 | -| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------------------- | ------- | ----- | ---- | ---------------------------------------- | +| type | string | - | 否 | 不支持动态修改。默认展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定。该属性可选值包括：
- capsule：胶囊型按钮，带圆角按钮，有背景色和文本；
- circle：圆形按钮，支持放置图标；
- text：文本按钮，仅包含文本显示；
- arc：弧形按钮，仅支持智能穿戴；
- download：下载按钮，额外增加下载进度条功能。 | +| value | string | - | 否 | button的文本值。 | +| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 | +| placement5+ | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：
- start：图标位于文本起始处；
- end：图标位于文本结束处；
- top：图标位于文本上方；
- bottom：图标位于文本下方。 | +| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 | ## 样式 @@ -31,31 +31,31 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| text-color | <color> | \#ff007dff
| 否 | 按钮的文本颜色。 | -| font-size | <length> | 16px
| 否 | 按钮的文本尺寸。 | -| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| font-style | string | normal | 否 | 按钮的字体样式。 | -| font-weight | number \| string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | -| icon-width | <length> | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> icon使用svg图源时必须设置该样式。 | -| icon-height | <length> | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> icon使用svg图源时必须设置该样式。 | -| radius | <length> | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------------------- | --------------- | ---- | ---------------------------------------- | +| text-color | <color> | \#007dff
| 否 | 按钮的文本颜色。 | +| font-size | <length> | 16px
| 否 | 按钮的文本尺寸。 | +| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| font-style | string | normal | 否 | 按钮的字体样式。 | +| font-weight | number \| string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| icon-width | <length> | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。
icon使用svg图源时必须设置该样式。 | +| icon-height | <length> | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。
icon使用svg图源时必须设置该样式。 | +| radius | <length> | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 | ### type设置为arc 除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom]外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| text-color | <color> | \#de0000 | 否 | 弧形按钮的文本颜色。 | -| font-size | <length> | 37.5px | 否 | 弧形按钮的文本尺寸。 | -| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | -| font-style | string | normal | 否 | 弧形按钮的字体样式。 | -| font-weight | number \| string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- | +| text-color | <color> | \#de0000 | 否 | 弧形按钮的文本颜色。 | +| font-size | <length> | 37.5px | 否 | 弧形按钮的文本尺寸。 | +| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | +| font-style | string | normal | 否 | 弧形按钮的字体样式。 | +| font-weight | number \| string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | ## 事件 @@ -69,13 +69,13 @@ 类型为download时，支持如下方法： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| setProgress | { progress:percent } | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 浮在进度条上的文字通过value值进行变更。 | +| 名称 | 参数 | 描述 | +| ----------- | ------------------------------ | ---------------------------------------- | +| setProgress | { progress:percent } | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。
浮在进度条上的文字通过value值进行变更。 | ## 示例 -``` +```html
@@ -87,7 +87,7 @@
``` -``` +```css /* xxx.css */ .div-button { flex-direction: column; @@ -130,8 +130,8 @@ } ``` -``` -// xxx.js +```js +// xxx.js export default { data: { count: 5, diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md index dcde8ec5c94c414b88680deed4fda54ef7d0633f..d151e99efb42a8f70eae0e6a2a63bb5536bfc47a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md @@ -1,7 +1,7 @@ # chart -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 图表组件，用于呈现线形图、柱状图、量规图界面。 @@ -19,114 +19,114 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：
- bar：柱状图。
- line：线形图。
- gauge：量规图。
- progress5+：进度类圆形图表。
- loading5+：加载类圆形图表。
- rainbow5+：占比类圆形图表。 | -| options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） | -| datasets | Array<ChartDataset> | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 | -| segments5+ | DataSegment \| Array<DataSegment> | - | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。
DataSegment针对进度类和加载类圆形图表使用，
Array<DataSegment>针对占比类图标使用，DataSegment最多9个。 | -| effects5+ | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | -| animationduration6+ | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------------------ | ---------------------------------------- | ---- | ---- | ---------------------------------------- | +| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：
- bar：柱状图。
- line：线形图。
- gauge：量规图。
- progress5+：进度类圆形图表。
- loading5+：加载类圆形图表。
- rainbow5+：占比类圆形图表。 | +| options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） | +| datasets | Array<ChartDataset> | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 | +| segments5+ | DataSegment \| Array<DataSegment> | - | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。
DataSegment针对进度类和加载类圆形图表使用，
Array<DataSegment>针对占比类图标使用，DataSegment最多9个。 | +| effects5+ | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | +| animationduration6+ | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 | **表1** ChartOptions -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | -| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | -| series | ChartSeries | - | 否 | 数据序列参数设置。可以设置1）线的样式，如线宽、是否平滑；2）设置线最前端位置白点的样式和大小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅线形图支持。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------ | ----------- | ---- | ---- | ---------------------------------------- | +| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | +| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | +| series | ChartSeries | - | 否 | 仅线形图支持设置数据序列参数，可以设置的样式：
- 线的样式，如线宽、是否平滑。
- 设置线最前端位置白点的样式和大小。 | **表2** ChartDataset -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| strokeColor | <color> | \#ff6384 | 否 | 线条颜色。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅线形图支持。 | -| fillColor | <color> | \#ff6384 | 否 | 填充颜色。线形图表示填充的渐变颜色。 | -| data | Array<number> \| Array<Point>5+ | - | 是 | 设置绘制线或柱中的点集。 | -| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅线形图支持。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | ---------------------------------------- | -------- | ---- | ---------------------- | +| strokeColor | <color> | \#ff6384 | 否 | 仅线形图支持设置线条颜色。 | +| fillColor | <color> | \#ff6384 | 否 | 填充颜色。
线形图表示填充的渐变颜色。 | +| data | Array<number> \| Array<Point>5+ | - | 是 | 设置绘制线或柱中的点集。 | +| gradient | boolean | false | 否 | 仅线形图支持设置是否显示填充渐变颜色。 | **表3** ChartAxis -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| min | number | 0 | 否 | 轴的最小值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅线形图支持负数。 | -| max | number | 100 | 否 | 轴的最大值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅线形图支持负数。 | -| axisTick | number | 10 | 否 | 轴显示的刻度数量。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。
> 在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 | -| display | boolean | false | 否 | 是否显示轴。 | -| color | <color> | \#c0c0c0 | 否 | 轴颜色。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | ------------- | -------- | ---- | ---------------------------------------- | +| min | number | 0 | 否 | 轴的最小值，仅线形图支持负数。 | +| max | number | 100 | 否 | 轴的最大值，仅线形图支持负数。 | +| axisTick | number | 10 | 否 | 轴显示的刻度数量。仅支持1~20，且具体显示的效果与图的宽度所占的像素/（max-min）有关。
在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 | +| display | boolean | false | 否 | 是否显示轴。 | +| color | <color> | \#c0c0c0 | 否 | 轴颜色。 | **表4** ChartSeries -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 | -| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 | -| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 | -| bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 | -| loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------- | ---- | ---- | -------------------- | +| lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 | +| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 | +| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 | +| bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 | +| loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 | **表5** ChartLineStyle -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| width | <length> | 1px | 否 | 线宽设置。 | -| smooth | boolean | false | 否 | 是否平滑。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------ | -------------- | ----- | ---- | ----- | +| width | <length> | 1px | 否 | 线宽设置。 | +| smooth | boolean | false | 否 | 是否平滑。 | **表6** PointStyle -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| shape | string | circle | 否 | 高亮点的形状。可选值为：
- circle：圆形。
- square：方形。
- triangle：三角形。 | -| size | <length> | 5px | 否 | 高亮点的大小。 | -| strokeWidth | <length> | 1px | 否 | 边框宽度 | -| strokeColor | <color> | \#ff0000 | 否 | 边框颜色。 | -| fillColor | <color> | \#ff0000 | 否 | 填充颜色。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------- | -------- | ---- | ---------------------------------------- | +| shape | string | circle | 否 | 高亮点的形状。可选值为：
- circle：圆形。
- square：方形。
- triangle：三角形。 | +| size | <length> | 5px | 否 | 高亮点的大小。 | +| strokeWidth | <length> | 1px | 否 | 边框宽度 | +| strokeColor | <color> | \#ff0000 | 否 | 边框颜色。 | +| fillColor | <color> | \#ff0000 | 否 | 填充颜色。 | **表7** ChartLoop -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| margin | <length> | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 | -| gradient | boolean | false | 否 | 是否需要渐变擦除。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------------- | ----- | ---- | ---------------------------------------- | +| margin | <length> | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 | +| gradient | boolean | false | 否 | 是否需要渐变擦除。 | **表8** Point5+ -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 | -| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 | -| description | string | - | 否 | 表示当前点的注释内容。 | -| textLocation | string | - | 否 | 可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。 | -| textColor | <color> | \#000000 | 否 | 表示注释文字的颜色。 | -| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。“dashed， 5， 5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。 | -| lineColor | <color> | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------ | ------------- | -------- | ---- | ---------------------------------------- | +| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 | +| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 | +| description | string | - | 否 | 表示当前点的注释内容。 | +| textLocation | string | - | 否 | 可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。 | +| textColor | <color> | \#000000 | 否 | 表示注释文字的颜色。 | +| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。“dashed， 5， 5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。 | +| lineColor | <color> | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 | **表9** DataSegment5+ -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 | -| endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。
不设置startColor时，会使用系统默认预置的颜色数组。 | -| value | number | 0 | 是 | 占比数据的所占份额，最大100。 | -| name | string | - | 否 | 此类数据的名称。 | - -| 数据组 | 浅色主题 | 深色主题 | -| -------- | -------- | -------- | -| 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d | -| 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b | -| 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d | -| 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 | -| 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 | -| 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 | -| 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 | -| 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d | -| 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------- | ------ | ---- | ---- | ---------------------------------------- | +| startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 | +| endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。
不设置startColor时，会使用系统默认预置的颜色数组。 | +| value | number | 0 | 是 | 占比数据的所占份额，最大100。 | +| name | string | - | 否 | 此类数据的名称。 | + +| 数据组 | 浅色主题 | 深色主题 | +| ---- | --------------------------- | --------------------------- | +| 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d | +| 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b | +| 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d | +| 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 | +| 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 | +| 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 | +| 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 | +| 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d | +| 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 | 当类型为量规图时，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------- | ------ | ---- | ---- | ---------------------- | +| percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 | ## 样式 @@ -135,18 +135,18 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| stroke-width | <length> | 32px（量规）
24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 | -| start-angle | <deg> | 240（量规）
0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 | -| total-angle | <deg> | 240（量规）
360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 | -| center-x | <length> | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持） | -| center-y | <length> | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持） | -| radius | <length> | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持） | -| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色。
如：colors: \#ff0000, \#00ff00。（仅量规图支持） | -| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重。
如：weights: 2, 2。（仅量规图支持） | -| font-family5+ | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](../arkui-js/js-components-common-customizing-font.md)。 | -| font-size5+ | <length> | - | 否 | 表示绘制注释的字体的大小。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------------ | -------------- | -------------------------- | ---- | ---------------------------------------- | +| stroke-width | <length> | 32px（量规）
24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 | +| start-angle | <deg> | 240（量规）
0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 | +| total-angle | <deg> | 240（量规）
360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 | +| center-x | <length> | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持） | +| center-y | <length> | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持） | +| radius | <length> | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持） | +| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色。
如：colors: \#ff0000, \#00ff00。（仅量规图支持） | +| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重。
如：weights: 2, 2。（仅量规图支持） | +| font-family5+ | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](../arkui-js/js-components-common-customizing-font.md)。 | +| font-size5+ | <length> | - | 否 | 表示绘制注释的字体的大小。 | ## 事件 @@ -158,14 +158,14 @@ 除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： -| 方法 | 参数 | 描述 | -| -------- | -------- | -------- | -| append | {
serial: number, // 设置要更新的线形图数据下标
data: Array<number>, // 设置新增的数据
} | 往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis min/max设置相关）。 | +| 方法 | 参数 | 描述 | +| ------ | ---------------------------------------- | ---------------------------------------- | +| append | {
serial: number, 
data: Array<number>, 
} | 向已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。假设serial的值为index，使用data数据更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis min/max设置相关）。 | ## 示例 1. 线形图 - ``` + ```html
@@ -176,7 +176,7 @@
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -202,7 +202,7 @@ } ``` - ``` + ```js // xxx.js export default { data: { @@ -211,24 +211,24 @@ strokeColor: '#0081ff', fillColor: '#cce5ff', data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], - gradient: true, + gradient: true } ], lineOps: { xAxis: { min: 0, max: 20, - display: false, + display: false }, yAxis: { min: 0, max: 1000, - display: false, + display: false }, series: { lineStyle: { width: "5px", - smooth: true, + smooth: true }, headPoint: { shape: "circle", @@ -236,14 +236,14 @@ strokeWidth: 5, fillColor: '#ffffff', strokeColor: '#007aff', - display: true, + display: true }, loop: { margin: 2, - gradient: true, + gradient: true } } - }, + } }, addData() { this.$refs.linechart.append({ @@ -257,7 +257,7 @@ ![zh-cn_image_0000001173324843](figures/zh-cn_image_0000001173324843.png) 2. 柱状图 - ``` + ```html
@@ -267,7 +267,7 @@
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -287,22 +287,22 @@ } ``` - ``` + ```js // xxx.js export default { data: { barData: [ { fillColor: '#f07826', - data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628] }, { fillColor: '#cce5ff', - data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], + data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410] }, { fillColor: '#ff88bb', - data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], + data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657] }, ], barOps: { @@ -310,14 +310,14 @@ min: 0, max: 20, display: false, - axisTick: 10, + axisTick: 10 }, yAxis: { min: 0, max: 1000, - display: false, - }, - }, + display: false + } + } } } ``` @@ -325,7 +325,7 @@ ![zh-cn_image_0000001173164929](figures/zh-cn_image_0000001173164929.png) 3. 量规图 - ``` + ```html
@@ -334,7 +334,7 @@
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -352,3 +352,76 @@ ``` ![zh-cn_image_0000001127125264](figures/zh-cn_image_0000001127125264.png) + +4. 进度类、加载类、占比类圆形图表 + ```html + +
+ progress Example + + + + loading Example + + + + rainbow Example + + + +
+ ``` + ```css + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .chart-region { + height: 400px; + width: 700px; + margin-top: 10px; + } + .text { + margin-top: 30px; + } + ``` + ```js + // xxx.js + export default { + data: { + progressdata: { + value: 50, + name: 'progress' + }, + loadingdata: { + startColor: "#ffc0cb", + endColor: "#00bfff", + }, + rainbowdata: [ + { + value: 50, + name: 'item1' + }, + { + value: 10, + name: 'item2' + }, + { + value: 20, + name: 'item3' + }, + { + value: 10, + name: 'item4' + }, + { + value: 10, + name: 'item5' + } + ] + } + } + ``` + ![rainbow](figures/rainbow.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md index c2ada666a38d33b17859157647e18847d7b49495..28f0128a4c0d661078f7803c79c8a4490eb9d7fd 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md @@ -1,7 +1,7 @@ # image -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 图片组件，用来渲染展示图片。 @@ -15,55 +15,55 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。
支持Base64字符串6+。格式为data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。
支持dataability://的路径前缀，用于访问通过data ability提供的图片路径6+。 | -| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---- | ------ | ---- | ---- | ---------------------------------------- | +| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。
- 支持Base64字符串6+。格式为data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。
- 支持dataability://的路径前缀，用于访问通过data ability提供的图片路径6+。 | +| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 | ## 样式 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| object-fit | string | cover | 否 | 设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式） | -| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向。（不支持svg格式） | -| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。 | -| object-position7+ | string | 0px 0px | 否 | 设置图片在组件内展示的位置。
设置类型有两种：
1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置
2. 字符，可选值：
- left 图片显示在组件左侧；
- top 图片显示在组件顶部位置；
- right 图片显示在组件右侧位置；
- bottom 图片显示在组件底部位置。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- | +| object-fit | string | cover | 否 | 设置图片的缩放类型，不支持svg格式。可选值类型说明请见object-fit类型说明。 | +| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向，不支持svg格式。 | +| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸，该属性为true时object-fit属性不生效，svg类型图源不支持该属性。 | +| object-position7+ | string | 0px 0px | 否 | 设置图片在组件内展示的位置。
设置类型有两种：
1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置
2. 字符，可选值：
- left 图片显示在组件左侧；
- top 图片显示在组件顶部位置；
- right 图片显示在组件右侧位置；
- bottom 图片显示在组件底部位置。 | **表1** object-fit 类型说明 -| 类型 | 描述 | -| -------- | -------- | -| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 | -| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 | -| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 | -| none | 保持原有尺寸进行居中显示。 | -| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 | - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 使用svg图片资源时： -> -> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制； -> -> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域； -> -> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下： -> -> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分； -> -> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。 +| 类型 | 描述 | +| ---------- | ------------------------------------ | +| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 | +| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 | +| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 | +| none | 保持原有尺寸进行居中显示。 | +| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 | + +> **说明：** +> 使用svg图片资源时： +> +> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制； +> +> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域； +> +> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下： +> +> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分； +> +> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。 ## 事件 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| complete(Rich) | { width：width， height：height } | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 | -| error(Rich) | { width：width， height：height } | 图片加载出现异常时触发该回调，异常时长宽为零。 | +| 名称 | 参数 | 描述 | +| -------------- | ---------------------------------------- | ------------------------- | +| complete(Rich) | {
 width：width，
 height：height
 } | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 | +| error(Rich) | {
 width：width，
 height：height
 } | 图片加载出现异常时触发该回调，异常时长宽为零。 | ## 方法 @@ -72,7 +72,7 @@ ## 示例 -``` +```html
@@ -81,7 +81,7 @@
``` -``` +```css /* xxx.css */ .container { justify-content: center; @@ -96,7 +96,7 @@ } ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md index 17361e8555a82fb65babfeee67549a62f346ac46..ee0b6de7578c387c4d32e85f1dc03bab2f3789d4 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md @@ -92,34 +92,36 @@ ## 示例 1. type为text - ``` + ```html
- +
``` - ``` + ```css /* xxx.css */ .content { - width: 60%; + width: 100%; flex-direction: column; align-items: center; } .input { + width: 60%; placeholder-color: gray; } .button { + width: 60%; background-color: gray; margin-top: 20px; - } - ``` - + } ``` + + ```js // xxx.js import prompt from '@system.prompt' export default { @@ -140,20 +142,21 @@ error: 'error text' }); }, - } + } ``` + ![zh-cn_image_0000001252835901](figures/zh-cn_image_0000001252835901.png) 2. type为button - ``` + ```html
``` - ``` + ```css /* xxx.css */ .div-button { flex-direction: column; @@ -168,14 +171,14 @@ ![zh-cn_image_0000001207995958](figures/zh-cn_image_0000001207995958.png) 3. type为checkbox - ``` + ```html
``` - ``` + ```css /* xxx.css */ .content{ width: 100%; @@ -185,7 +188,7 @@ } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt' export default { @@ -201,7 +204,7 @@ ![zh-cn_image_0000001208155956](figures/zh-cn_image_0000001208155956.png) 4. type为radio - ``` + ```html
@@ -210,7 +213,7 @@
``` - ``` + ```css /* xxx.css */ .content{ width: 100%; @@ -220,7 +223,7 @@ } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt' export default { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md index cfa7a4a4389ecea266e06c90d32fb400c793a98f..87f8efafe0b895e23924c1a444701ce697831e17 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md @@ -60,7 +60,7 @@ ## 示例 -``` +```html
@@ -78,11 +78,11 @@
``` -``` +```css /*xxx.css */ .container { flex-direction: column; - align-items: center; + margin-left: 20px; } .row { flex-direction: row; diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md index 0ae01262a15fc01281dec8bd0e3b13f0b1cb882b..0de14028ba6b66686ca06e26be467f0de859bbcd 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md @@ -62,76 +62,79 @@ ## 示例 -``` +```html -
- {{marqueeCustomData}} -
- - +
+
+ + Life is a journey, not the destination. + +
+
+ +
``` -``` +```css /* xxx.css */ -.container { +.tutorial-page { + width: 750px; + height: 100%; flex-direction: column; - justify-content: center; align-items: center; - background-color: #ffffff; + justify-content: center; } -.customMarquee { - width: 100%; - height: 80px; - padding: 10px; - margin: 20px; - border: 4px solid #ff8888; - border-radius: 20px; - font-size: 40px; - color: #ff8888; - font-weight: bolder; - font-family: serif; - background-color: #ffdddd; +.marqueetext { + font-size: 37px; } -.content { - flex-direction: row; +.mymarquee { + margin-top: 20px; + width:100%; + height: 100px; + margin-left: 50px; + margin-right: 50px; + border: 1px solid #dc0f27; + border-radius: 15px; + align-items: center; } -.controlButton { - flex-grow: 1; - background-color: #F2F2F2; - text-color: #0D81F2; +button{ + width: 200px; + height: 80px; + margin-top: 100px; } ``` -``` +```js // xxx.js export default { - data: { - scrollAmount: 30, - loop: 3, - marqueeDir: 'left', - marqueeCustomData: 'Custom marquee', - }, - onMarqueeBounce: function() { - console.log("onMarqueeBounce"); + private: { + loopval: 1, + scroll: 8, + color1: 'red' }, - onMarqueeStart: function() { - console.log("onMarqueeStart"); + onInit(){ }, - onMarqueeFinish: function() { - console.log("onMarqueeFinish"); + setfinish(e) { + this.loopval= this.loopval + 1, + this.r = Math.floor(Math.random()*255), + this.g = Math.floor(Math.random()*255), + this.b = Math.floor(Math.random()*255), + this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)', + this.$element('testmarquee').start(), + this.loopval= this.loopval - 1 }, - onStartClick (evt) { - this.$element('customMarquee').start(); + makestart(e) { + this.$element('testmarquee').start() }, - onStopClick (evt) { - this.$element('customMarquee').stop(); + makestop(e) { + this.$element('testmarquee').stop() } } ``` -![zh-cn_image_0000001127284934](figures/zh-cn_image_0000001127284934.gif) +![zh-cn_image_0000001176075554](figures/zh-cn_image_0000001176075554.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md index 15a1e89ddca0b91a2fe9716e2037010f63738fa6..5a7d79339a11fa55cc5dee82e03e4af57c93967b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md @@ -1,7 +1,7 @@ # picker-view -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 嵌入页面的滑动选择器。 @@ -19,24 +19,24 @@ | ---- | ------ | ---- | ---- | ---------------------------------------- | | type | string | text | 否 | 设置滑动选择器的类型，该属性不支持动态修改，可选项有：
- text：文本选择器。
- time：时间选择器。
- date：日期选择器。
- datetime：日期时间选择器。
- multi-text：多列文本选择器。 | -文本选择器：type=text +### 文本选择器 | 名称 | 类型 | 默认值 | 必填 | 描述 | | --------------- | ------ | ---- | ---- | ---------------------------------------- | -| range | Array | - | 否 | 设置文本选择器的取值范围。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。 | +| range | Array | - | 否 | 设置文本选择器的取值范围。
使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 | | selected | string | 0 | 否 | 设置文本选择器的默认选择值，该值需要为range的索引。 | | indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 | | indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 | -时间选择器：type=time +### 时间选择器 | 名称 | 类型 | 默认值 | 必填 | 描述 | | ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- | | containsecond | boolean | false | 否 | 时间选择器是否包含秒。 | | selected | string | 当前时间 | 否 | 设置时间选择器的默认取值，格式为 HH:mm；
当包含秒时，格式为HH:mm:ss。 | -| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 | -日期选择器：type=date +### 日期选择器 | 名称 | 类型 | 默认值 | 必填 | 描述 | | ------------------ | ------------ | ---------- | ---- | ---------------------------------------- | @@ -46,21 +46,21 @@ | lunar5+ | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 | | lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 | -日期时间选择器：type=datetime，日期的选择范围为本年的日月。 +### 日期时间选择器 | 名称 | 类型 | 默认值 | 必填 | 描述 | | ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | | selected | string | 当前日期时间 | 否 | 设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。 | -| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 | | lunar5+ | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | | lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 | -多列文本选择器：type=multi-text +### 多列文本选择器 | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | ------- | --------- | ---- | ---------------------------------------- | | columns | number | - | 是 | 设置多列文本选择器的列数。 | -| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如  [["a","b"], ["c","d"]]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。 | +| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如  [["a","b"], ["c","d"]]。
使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 | | selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。 | @@ -70,7 +70,7 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- | -| color | <color> | \#ffffff | 否 | 候选项字体颜色。 | +| color | <color> | \#ffffff | 否 | 候选项字体颜色。 | | font-size | <length> | 16px | 否 | 候选项字体尺寸，类型length，单位px。 | | selected-color | <color> | #ff0a69f7 | 否 | 选中项字体颜色。 | | selected-font-size | <length> | 20px | 否 | 选中项字体尺寸，类型length，单位px。 | @@ -83,31 +83,31 @@ 仅支持如下事件： -type=text： +### 文本选择器 | 名称 | 参数 | 描述 | | ------ | ---------------------------------------- | --------------- | | change | { newValue: newValue, newSelected: newSelected } | 文本选择器选定值后触发该事件。 | -type=time： +### 时间选择器 | 名称 | 参数 | 描述 | | ------ | ---------------------------------------- | ------------------------------- | | change | { hour: hour, minute: minute, [second:second]} | 时间选择器选定值后触发该事件。
包含秒时，返回时分秒。 | -type=date： +### 日期选择器 | 名称 | 参数 | 描述 | | ------ | ---------------------------------------- | --------------- | | change | { year:year, month:month, day:day } | 日期选择器选择值后触发该事件。 | -type=datetime： +### 日期时间选择器 | 名称 | 参数 | 描述 | | ------ | ---------------------------------------- | ----------------- | | change | { year:year, month:month, day:day,  hour:hour, minute:minute } | 日期时间选择器选择值后触发该事件。 | -type=multi-text： +### 多列文本选择器 | 名称 | 参数 | 描述 | | ------------ | ---------------------------------------- | ---------------------------------------- | @@ -120,67 +120,252 @@ type=multi-text： ## 示例 - -``` - -
- - Selected：{{time}} - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; -} -.title { - font-size: 30px; - text-align: center; -} -.time-picker { - width: 500px; - height: 400px; - margin-top: 20px; -} -``` - -``` -/* xxx.js */ -export default { - data: { - defaultTime: "", - time: "", - }, - onInit() { - this.defaultTime = this.now(); - }, - handleChange(data) { - this.time = this.concat(data.hour, data.minute); - }, - now() { - const date = new Date(); - const hours = date.getHours(); - const minutes = date.getMinutes(); - return this.concat(hours, minutes); - }, - - fill(value) { - return (value > 9 ? "" : "0") + value; - }, - - concat(hours, minutes) { - return `${this.fill(hours)}:${this.fill(minutes)}`; - }, -} -``` - -![zh-cn_image_0000001173324845](figures/zh-cn_image_0000001173324845.png) +1. 文本选择器 + ```html + +
+ + 选中值：{{value}} 选中下标： {{index}} + + +
+ ``` + + ```css + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 454px; + height: 454px; + } + .title { + font-size: 30px; + text-align: center; + margin-top: 20px; + } + ``` + + ```js + /* xxx.js */ + export default { + data: { + options: ['选项1', '选项2', '选项3'], + value: "选项1", + index: 0 + }, + handleChange(data) { + this.value = data.newValue; + this.index = data.newSelected; + }, + } + ``` + ![](figures/pickerview1.gif) + +2. 时间选择器 + ```html + +
+ + Selected：{{time}} + + +
+ ``` + + ```css + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 454px; + height: 454px; + } + .title { + font-size: 30px; + text-align: center; + } + .time-picker { + width: 500px; + height: 400px; + margin-top: 20px; + } + ``` + + ```js + /* xxx.js */ + export default { + data: { + defaultTime: "", + time: "", + }, + onInit() { + this.defaultTime = this.now(); + }, + handleChange(data) { + this.time = this.concat(data.hour, data.minute); + }, + now() { + const date = new Date(); + const hours = date.getHours(); + const minutes = date.getMinutes(); + return this.concat(hours, minutes); + }, + fill(value) { + return (value > 9 ? "" : "0") + value; + }, + concat(hours, minutes) { + return `${this.fill(hours)}:${this.fill(minutes)}`; + }, + } + ``` + + ![](figures/pickerview2.gif) + +3. 日期选择器 + ```html + +
+ + Selected：{{time}} + + +
+ ``` + + ```css + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 454px; + height: 454px; + } + .title { + font-size: 30px; + text-align: center; + margin-top: 20px; + } + .date-picker { + width: 500px; + height: 400px; + margin-top: 50px; + } + ``` + + ```js + /* xxx.js */ + export default { + data: { + date: "", + }, + handleChange(data) { + this.date = data.year + "年" + data.month + "月" + data.day + "日"; + }, + } + ``` + ![](figures/pickerview3.gif) + +4. 日期时间选择器 + ```html + +
+ + Selected：{{datetime}} + + +
+ ``` + + ```css + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 500px; + height: 454px; + } + .title { + font-size: 30px; + text-align: center; + margin-top: 20px; + } + .date-picker { + width: 500px; + height: 400px; + margin-top: 50px; + } + ``` + + ```js + /* xxx.js */ + export default { + data: { + datetime: "", + }, + handleChange(data) { + this.datetime = data.year + "年" + data.month + "月" + data.day + "日" + data.hour + "时" + data.minute + "分"; + }, + } + ``` + ![](figures/pickerview4.gif) + +5. 多列文本选择器 + + ```html + +
+ + Selected：{{ value }} + + +
+ ``` + + ```css + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 500px; + height: 454px; + } + .title { + font-size: 30px; + text-align: center; + margin-top: 20px; + } + ``` + + ```js + /* xxx.js */ + export default { + data: { + multitext: [ + [1, 2, 3], + [4, 5, 6], + [7, 8, 9], + ], + value: "" + }, + handleChange(data) { + this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected; + }, + } + ``` + ![](figures/pickerview5.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md index 7eb222bd9a40ba46eab060932e5d9a36ae0386ea..577633c41f67995931fea12df90fdf6ee5ab2085 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md @@ -163,128 +163,159 @@ ## 示例 -``` +```html
- - - - - - - - - - - + + + + + + + + + +
``` -``` +```css /* xxx.css */ -.container { - flex-direction: column; - justify-content: center; - align-items: center; +.container { + flex-direction: column; + justify-content: center; + align-items: center; } - picker{ - width:60%; - height:80px; - border-radius:20px; - text-color:white; - font-size:15px; - background-color:#4747e3; - margin-left:20%; + +picker { + width: 60%; + height: 80px; + border-radius: 20px; + text-color: white; + font-size: 15px; + background-color: #4747e3; + margin-left: 20%; } - select{ - background-color: #efecec; - height: 50px; - width: 60%; - margin-left: 20%; - margin-top: 300px; - margin-bottom: 50px; - font-size: 22px; + +select { + background-color: #efecec; + height: 50px; + width: 60%; + margin-left: 20%; + margin-top: 300px; + margin-bottom: 50px; + font-size: 22px; } ``` -``` +```js // xxx.js import router from '@system.router'; import prompt from '@system.prompt'; + export default { - data: { - selectList:["text","data","time","datetime","multitext"], - rangetext:['15', "20", "25"], - multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]], - textvalue:'default textvalue', - datevalue:'default datevalue', - timevalue:'default timevalue', - datetimevalue:'default datetimevalue', - multitextvalue:'default multitextvalue', - containsecond:true, - multitextselect:[1,2,0], - datetimeselect:'2012-5-6-11-25', - timeselect:'11:22:30', - dateselect:'2021-3-2', - textselect:'2' - }, - selectChange(e){ - for(let i = 0;i
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -90,7 +90,7 @@ select{ } ``` -``` +```js /* index.js */ export default { data: { @@ -108,9 +108,6 @@ export default { this.qr_type = 'circle' } }, - setvalue(e) { - this.qr_value = e.newValue - }, setcol(e) { this.qr_col = e.newValue }, @@ -122,4 +119,3 @@ export default { ![zh-cn_image_0000001222948301](figures/zh-cn_image_0000001222948301.gif) - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md index 7e8e09b155d0c3d1b8d0e60682bf07c3bc3e9164..8f040c9400ffad5b447166ea9716b3834dd8f711 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md @@ -1,7 +1,7 @@ # search -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供搜索框组件，用于提供用户搜索内容的输入区域。 @@ -15,19 +15,19 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 | -| hint | string | - | 否 | 搜索提示文字。 | -| value | string | - | 否 | 搜索框搜索文本值。 | -| searchbutton5+ | string | - | 否 | 搜索框末尾搜索按钮文本值。 | -| menuoptions5+ | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------------- | ----------------------- | ---- | ---- | --------------------------------- | +| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 | +| hint | string | - | 否 | 搜索提示文字。 | +| value | string | - | 否 | 搜索框搜索文本值。 | +| searchbutton5+ | string | - | 否 | 搜索框末尾搜索按钮文本值。 | +| menuoptions5+ | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | **表1** MenuOption5+ -| 名称 | 类型 | 描述 | -| -------- | -------- | -------- | -| icon | string | 菜单选项中的图标路径。 | +| 名称 | 类型 | 描述 | +| ------- | ------ | ----------- | +| icon | string | 菜单选项中的图标路径。 | | content | string | 菜单选项中的文本内容。 | @@ -35,28 +35,28 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| color | <color> | \#e6000000 | 否 | 搜索框的文本颜色。 | -| font-size | <length> | 16px | 否 | 搜索框的文本尺寸。 | -| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| placeholder-color | <color> | \#99000000
| 否 | 搜索框的提示文本颜色。 | -| font-weight | number \| string | normal | 否 | 搜索框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | -| caret-color6+ | <color> | - | 否 | 设置输入光标的颜色。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- | +| color | <color> | \#e6000000 | 否 | 搜索框的文本颜色。 | +| font-size | <length> | 16px | 否 | 搜索框的文本尺寸。 | +| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| placeholder-color | <color> | \#99000000
| 否 | 搜索框的提示文本颜色。 | +| font-weight | number \| string | normal | 否 | 搜索框的字体粗细，见text组件[font-weight](../arkui-js/js-components-basic-text.md#样式)的样式属性。 | +| font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| caret-color6+ | <color> | - | 否 | 设置输入光标的颜色。 | ## 事件 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| change | { text:newText } | 输入内容发生变化时触发。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 改变value属性值不会触发该回调。 | -| submit | { text:submitText } | 点击搜索图标、搜索按钮5+或者按下软键盘搜索按钮时触发。 | -| translate5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | -| share5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | -| search5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | +| 名称 | 参数 | 描述 | +| ------------------------- | ---------------------------------------- | ---------------------------------------- | +| change | { text:newText } | 输入内容发生变化时触发。
改变value属性值不会触发该回调。 | +| submit | { text:submitText } | 点击搜索图标、搜索按钮5+或者按下软键盘搜索按钮时触发。 | +| translate5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | +| share5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | +| search5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | | optionselect5+ | { index:optionIndex, value: selectedText } | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | @@ -67,7 +67,7 @@ ## 示例 -``` +```html
@@ -75,7 +75,7 @@
``` -``` +```css /* xxx.css */ .container { display: flex; diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md index fec6983512032ad84693f293302f85ed66430b3c..09d5c7e3a82938a1ef217ce444d99ebbbdd49d36 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md @@ -1,6 +1,7 @@ # slider -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** +> > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 滑动条组件，用来快速调节设置值，如音量、亮度等。 @@ -50,55 +51,33 @@ | 属性 | 类型 | 说明 | | -------- | -------- | -------- | | value5+ | number | 当前slider的进度值。 | -| mode5+ | string | 当前change事件的类型，可选值为：
- start：slider的值开始改变。
- move：slider的值跟随手指拖动中。
- end：slider的值结束改变。 | +| mode5+ | string | 当前change事件的类型，可选值为：
- start：slider的值开始改变。
- move：slider的值跟随手指拖动中。
- end：slider的值结束改变。
- click：slider的值在点击进度条后改变。 | ## 示例 -``` +```html
- slider start value is {{startValue}} - slider current value is {{currentValue}} - slider end value is {{endValue}} - + + +
``` -``` +```css /* xxx.css */ .container { - flex-direction: column; - justify-content: center; - align-items: center; - + flex-direction: column; + justify-content: center; + align-items: center; } -``` - -``` -// xxx.js -export default { - data: { - value: 0, - startValue: 0, - currentValue: 0, - endValue: 0, - }, - setvalue(e) { - if (e.mode == "start") { - this.value = e.value; - this.startValue = e.value; - } else if (e.mode == "move") { - this.value = e.value; - this.currentValue = e.value; - } else if (e.mode == "end") { - this.value = e.value; - this.endValue = e.value; - } - } +slider{ + margin-top: 100px; } ``` -![zh-cn_image_0000001173324709](figures/zh-cn_image_0000001173324709.png) + +![zh-cn_image_0000001173324709](figures/slider.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md index 9d8e6bfc8079d0aaeec0129c13ce97a55b366449..50a4095562e348d0e039ac2842db80aea7b4be6b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md @@ -1,7 +1,7 @@ # switch -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 开关选择器，通过开关，开启或关闭某个功能。 @@ -19,12 +19,12 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| checked | boolean | false | 否 | 是否选中。 | -| showtext | boolean | false | 否 | 是否显示文本。 | -| texton | string | "On" | 否 | 选中时显示的文本。 | -| textoff | string | "Off" | 否 | 未选中时显示的文本。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | ------- | ----- | ---- | ---------- | +| checked | boolean | false | 否 | 是否选中。 | +| showtext | boolean | false | 否 | 是否显示文本。 | +| texton | string | "On" | 否 | 选中时显示的文本。 | +| textoff | string | "Off" | 否 | 未选中时显示的文本。 | ## 样式 @@ -33,24 +33,24 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| texton-color(Rich) | <color> | \#000000 | 否 | 选中时显示的文本颜色。 | -| textoff-color(Rich) | <color> | \#000000 | 否 | 未选中时显示的文本颜色。 | -| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 | -| font-size(Rich) | <length> | - | 否 | 文本尺寸，仅设置texton和textoff生效。 | -| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-weight(Rich) | number \| string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见[text组件的font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | +| texton-color(Rich) | <color> | \#000000 | 否 | 选中时显示的文本颜色，仅设置texton和textoff生效。 | +| textoff-color(Rich) | <color> | \#000000 | 否 | 未选中时显示的文本颜色，仅设置texton和textoff生效。 | +| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 | +| font-size(Rich) | <length> | - | 否 | 文本尺寸，仅设置texton和textoff生效。 | +| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见text组件[font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-weight(Rich) | number \| string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见text组件的[font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 | ## 事件 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | +| 名称 | 参数 | 描述 | +| ------ | ---------------------------------------- | ------------- | | change | { checked: checkedValue } | 选中状态改变时触发该事件。 | ## 方法 @@ -59,48 +59,66 @@ ## 示例 -``` +```html
- - + + + + + +
``` -``` +```css /* xxx.css */ .container { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } -switch{ - texton-color:#002aff; - textoff-color:silver; - text-padding:20px; +.switch { + texton-color: red; + textoff-color: forestgreen; +} +.text { + text-padding: 20px; + font-size: 30px; + font-weight: 700; } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { - data: { - title: 'World' - }, - switchChange(e){ - console.log(e.checked); - if(e.checked){ - prompt.showToast({ - message: "打开开关" - }); - }else{ - prompt.showToast({ - message: "关闭开关" - }); + data: { + title: 'World' + }, + switchChange(e) { + if (e.checked) { + prompt.showToast({ + message: "打开开关" + }); + } else { + prompt.showToast({ + message: "关闭开关" + }); + } + }, + normalswitchChange(e) { + if (e.checked) { + prompt.showToast({ + message: "switch on" + }); + } else { + prompt.showToast({ + message: "switch off" + }); + } } - } } ``` -![zh-cn_image_0000001152862510](figures/zh-cn_image_0000001152862510.gif) +![zh-cn_image_0000001152862510](figures/switch.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md index c25ba6285163c57c5bfc9e76828baf0b9fd1daa2..d3b8dbe68f3073c3cde2cee2c1ad0b85943a1458 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md @@ -1,10 +1,10 @@ # text -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > -> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > -> - 文本的展示内容需要写在元素标签内。 +> - 文本的展示内容需要写在元素标签内。 文本，用于呈现一段信息。 @@ -27,43 +27,43 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| color | <color> | #e5000000 | 否 | 设置文本的颜色。 | -| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | -| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果需要支持动态生效，请参看config描述文件中config-changes标签。 | -| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 | -| word-spacing7+ | <length> \| <percentage> \| string | normal | 否 | 设置文本之间的间距，string可选值为：
normal：默认的字间距。 | -| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：
- normal：标准的字体样式；
- italic：斜体的字体样式。 | -| font-weight | number \| string | normal | 否 | 设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> number取值必须为100的整数倍。
string类型取值支持如下四个值：lighter、normal、bold、bolder。 | -| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：
- underline：文字下划线修饰；
- line-through：穿过文本的修饰线n
- none：标准文本。 | -| text-decoration-color7+ | <color> | - | 否 | 设置文本修饰线的颜色。 | -| text-align | string | start
| 否 | 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐；
- start：根据文字书写相同的方向对齐；
- end：根据文字书写相反的方向对齐。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 | -| line-height | <length> \| <percentage>7+ \| string7+ | 0px1-6
normal7+ | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：
normal7+：默认的行高。 | -| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：
- clip：将文本根据父容器大小进行裁剪显示；
- ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 | -| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | -| max-lines | number \| string7+ | - | 否 | 设置文本的最大行数，string类型可选值为：
- auto7+：文本行数自适应容器高度。 | -| min-font-size | <length> | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | -| max-font-size | <length> | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | -| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 | -| prefer-font-sizes | <array> | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。
如：prefer-font-sizes: 12px,14px,16px | -| word-break6+ | string | normal | 否 | 设置文本折行模式，可选值为：
- normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。
- break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。
- break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 | -| text-indent7+ | <length> | - | 否 | 设置首行缩进量。 | -| white-space7+ | string | pre | 否 | 设置处理元素中空白的模式，可选值为：
- normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；
- nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；
- pre：所有东西原样输出；
- pre-wrap：所有东西原样输出，文本换行；
- pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 | -| adapt-height7+ | boolean | false | 否 | 文本大小是否自适应容器高度。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 设置字体大小自适应相关样式后生效。 | - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。 -> -> - 文本换行：文本可以通过转义字符\r\n进行换行。 -> -> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。 -> -> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。 -> -> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。 -> -> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容) +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- | +| color | <color> | #e5000000 | 否 | 设置文本的颜色。 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | +| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果需要支持动态生效，请参看config描述文件中config-changes标签。 | +| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 | +| word-spacing7+ | <length> \| <percentage> \| string | normal | 否 | 设置文本之间的间距，string可选值为：
normal：默认的字间距。 | +| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：
- normal：标准的字体样式；
- italic：斜体的字体样式。 | +| font-weight | number \| string | normal | 否 | 设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。number取值必须为100的整数倍。
string类型取值支持如下四个值：lighter、normal、bold、bolder。 | +| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：
- underline：文字下划线修饰；
- line-through：穿过文本的修饰线n
- none：标准文本。 | +| text-decoration-color7+ | <color> | - | 否 | 设置文本修饰线的颜色。 | +| text-align | string | start
| 否 | 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐；
- start：根据文字书写相同的方向对齐；
- end：根据文字书写相反的方向对齐。
如果文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 | +| line-height | <length> \| <percentage>7+ \| string7+ | 0px1-6
normal7+ | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：
normal7+：默认的行高。 | +| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：
- clip：将文本根据父容器大小进行裁剪显示；
- ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 | +| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| max-lines | number \| string7+ | - | 否 | 设置文本的最大行数，string类型可选值为：
- auto7+：文本行数自适应容器高度。 | +| min-font-size | <length> | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | +| max-font-size | <length> | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | +| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 | +| prefer-font-sizes | <array> | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。
如：prefer-font-sizes: 12px,14px,16px | +| word-break6+ | string | normal | 否 | 设置文本折行模式，可选值为：
- normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。
- break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。
- break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 | +| text-indent7+ | <length> | - | 否 | 设置首行缩进量。 | +| white-space7+ | string | pre | 否 | 设置处理元素中空白的模式，可选值为：
- normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；
- nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；
- pre：所有东西原样输出；
- pre-wrap：所有东西原样输出，文本换行；
- pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 | +| adapt-height7+ | boolean | false | 否 | 文本大小是否自适应容器高度。
设置字体大小自适应相关样式后生效。 | + +> **说明：** +> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。 +> +> - 文本换行：文本可以通过转义字符\r\n进行换行。 +> +> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。 +> +> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。 +> +> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。 +> +> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容) ## 事件 @@ -76,84 +76,66 @@ ## 示例 - -``` +1. +```html
-
- - Hello {{ title }} - -
+ default text + hello world with color + hello world with font-size + hello world with letter-spacing + hello world with word-spacing + hello world with italic + hello world with font-weight + hello world with underline + hello world with line-through + hello world with text-align:right
``` -``` +```css /* xxx.css */ .container { - display: flex; - justify-content: center; - align-items: center; -} -.content{ - width: 400px; - height: 400px; - border: 20px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .title { - font-size: 80px; - text-align: center; - width: 400px; - height: 400px; + text-align: center; + width: 800px; + height: 60px; } -``` - -``` -// xxx.js -export default { - data: { - title: 'World' - } +.textcolor { + color: indianred; } -``` - -![zh-cn_image_0000001167823076](figures/zh-cn_image_0000001167823076.png) - -``` - -
- - This is a passage - - - This is a passage - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - align-items: center; - background-color: #F1F3F5; - justify-content: center; +.textsize { + font-size: 40px; } -.text1{ - word-spacing: 10px; - adapt-height: true; +.textletterspacing { + letter-spacing: -3px; } -.text2{ - width: 200px; - max-lines: 1; - text-overflow: ellipsis; - text-valign: middle; - line-height: 40px; - text-decoration: underline; - text-decoration-color: red; - text-indent: 20px; - white-space: pre; +.textwordspacing { + word-spacing: 20px; +} +.textstyle { + font-style: italic; +} +.textweight { + font-weight: 700; +} +.textdecoration1 { + text-decoration: underline; +} +.textdecoration2 { + text-decoration: line-through; + text-decoration-color: red; +} +.textalign { + text-align: right; } ``` -![zh-cn_image_0000001213103299](figures/zh-cn_image_0000001213103299.png) + +![zh-cn_image_0000001167823076](figures/text.png) + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md index ffd3d1426f89de720ddf2cbb5263baf1bcea481e..27867bba0787e9f70a63229dba187fb353bb8d53 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md @@ -37,7 +37,7 @@ ### getContext -getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext +getContext(type: '2d', options?: ContextAttrOptions): CanvasRenderingContext2D 获取canvas绘图上下文。不支持在onInit和onReady中进行调用。 @@ -77,7 +77,7 @@ toDataURL(type?: string, quality?: number): string ## 示例 -``` +```html
@@ -85,7 +85,7 @@ toDataURL(type?: string, quality?: number): string
``` -``` +```css // xxx.js export default { handleClick() { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md index 4450c65ca2ee789d92d7a13857fb160cca019ce2..9309b931dfdba0a93e4840a11cfa8fa560675fd9 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md @@ -92,20 +92,19 @@ animate( keyframes: Keyframes, options: Options)：void | repeat | 动画重播事件。 | - 示例 - ``` - -
-
-
- - -
+```html + +
+
+
+ +
- ``` +``` ``` /* xxx.css */ diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md index 0c59395b6ff772d622eb280c1699979c916cf4c4..d1cbbe7e28ade4b34fdc1df05bd18d70f19fb343 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md @@ -67,4 +67,3 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 通用样式都不是必填项。 - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md index 69ce3302ec206b22abb962b100eccbcc3186a35d..bce1295337bf7ec5e3cf7bbb03f6f7e8b6bc1287 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md @@ -42,7 +42,7 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage”。 -``` +```html
@@ -57,20 +57,20 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
``` -``` +```js // xxx.js -import router from '@system.router'; +import router from '@ohos.router'; export default { jump() { router.push({ // 路径要与config.json配置里面的相同 - uri: 'pages/detailpage', + url: 'pages/detailpage', }); }, } ``` -``` +```css /* xxx.css */ .shared-transition-style { shared-transition-effect: exchange; @@ -82,7 +82,7 @@ export default { } ``` -``` +```html
@@ -90,9 +90,9 @@ export default {
``` -``` +```js // xxx.js -import router from '@system.router'; +import router from '@ohos.router'; export default { jumpBack() { router.back(); @@ -100,7 +100,7 @@ export default { } ``` -``` +```css /* xxx.css */ .shared-transition-style { shared-transition-effect: exchange; @@ -130,7 +130,7 @@ export default { source_page包含顶部内容以及卡片列表，点击卡片可以跳转到target_page。 -``` +```html
@@ -138,35 +138,37 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar MAIN TITLE
- + {{$item.title}}
``` -``` +```js // xxx.js -import router from '@system.router' +import router from '@ohos.router' export default { data: { list: [] }, onInit() { for(var i = 0; i < 10; i++) { - var item = { uri: "pages/card_transition/target_page/index", + var item = { url: "pages/card_transition/target_page/index", title: "this is title" + i, id: "item_" + i } this.list.push(item); } }, - jumpPage(id, uri) { + jumpPage(id, url) { var cardId = this.$element(id).ref; - router.push({ uri: uri, params : { ref : cardId } }); + router.push({ url: url, params : { ref : cardId } }); } } ``` -``` +```css /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; background-color: #ABDAFF; @@ -184,7 +186,7 @@ export default { } ``` -``` +```html
@@ -194,9 +196,11 @@ export default {
``` -``` +```css /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; background-color: #EBFFD7; @@ -245,7 +249,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 1. Page1 - ``` + ```html
index @@ -253,22 +257,22 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
``` - ``` + ```js - import router from '@system.router'; + import router from '@ohos.router'; export default { data: { }, jump() { router.push({ - uri:'pages/transition2/transition2' + url:'pages/transition2/transition2' }) } } ``` - ``` + ```css .container { flex-direction: column; @@ -315,17 +319,17 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 2. Page2 - ``` + ```html
transition
-
``` - ``` + ```js - import router from '@system.router'; + import router from '@ohos.router'; export default { data: { @@ -334,9 +338,10 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 router.back() } } - ``` - - ``` + +``` + +```css .container { flex-direction: column; @@ -379,4 +384,4 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 } ``` - ![transition](figures/transition.gif) +![transition](figures/transition.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md index c2fb21c57dddff95a9ea352ed5af449da408b7b1..696ea732fd9a8e8db233f80fa881483249ebe64a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md @@ -1,7 +1,7 @@ # list -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 @@ -19,86 +19,86 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| scrollpage | boolean | false | 否 | 设置为true时，将 list 顶部页面中非 list 部分随 list 一起滑出可视区域，当list方向为row时，不支持此属性。 | -| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。
可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。 | -| scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：
- off：不显示。
- auto：按需显示(触摸时显示，2s后消失)。
- on：常驻显示。 | -| scrolleffect | string | spring | 否 | 滑动效果，目前支持如下滑动效果：
- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。
- no：滑动到边缘后无效果。 | -| indexer | boolean \| Array<string> | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：
"indexer" : "true"表示使用默认字母索引表。
"indexer" : "false"表示无索引。
"indexer" : ['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
> 
> - 点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 | -| indexercircle5+ | boolean | - | 否 | 是否为环形索引。
穿戴设备默认为true，其他为false。indexer为false时不生效。 | -| indexermulti5+ | boolean | false | 否 | 是否开启索引条多语言功能。
indexer为false时不生效。 | -| indexerbubble5+ | boolean | true | 否 | 是否开启索引切换的气泡提示。
indexer为false时不生效。 | -| divider5+ | boolean | false | 否 | item是否自带分隔线。
其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。 | -| shapemode | string | default | 否 | 侧边滑动栏的形状类型。
- default：不指定，跟随主题；
- rect：矩形；
- round：圆形。 | -| updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。
- false：新增删除item时无过渡动效。
- true：新增删除item时播放过程动效。 | -| chainanimation5+ | boolean | false | 否 | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
- false：不启用链式联动
- true：启用链式联动
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > - 不支持动态修改。
  > - 如同时配置了indexer，链式动效不生效。
  > - 如配置了链式动效，list-item的sticky不生效。 | -| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。 | -| initialoffset | <length> | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。 | -| selected5+ | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| --------------------------- | ---------------------------------------- | ------- | ---- | ---------------------------------------- | +| scrollpage | boolean | false | 否 | 设置为true时，将 list 顶部页面中非 list 部分随 list 一起滑出可视区域，当list方向为row时，不支持此属性。 | +| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。
可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。 | +| scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：
- off：不显示。
- auto：按需显示(触摸时显示，2s后消失)。
- on：常驻显示。 | +| scrolleffect | string | spring | 否 | 滑动效果，目前支持如下滑动效果：
- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。
- no：滑动到边缘后无效果。 | +| indexer | boolean \| Array<string> | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：
"indexer" : "true"表示使用默认字母索引表。
"indexer" : "false"表示无索引。
"indexer" : ['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。
indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 | +| indexercircle5+ | boolean | - | 否 | 是否为环形索引。
穿戴设备默认为true，其他为false。indexer为false时不生效。 | +| indexermulti5+ | boolean | false | 否 | 是否开启索引条多语言功能。
indexer为false时不生效。 | +| indexerbubble5+ | boolean | true | 否 | 是否开启索引切换的气泡提示。
indexer为false时不生效。 | +| divider5+ | boolean | false | 否 | item是否自带分隔线。
其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。 | +| shapemode | string | default | 否 | 侧边滑动栏的形状类型。
- default：不指定，跟随主题；
- rect：矩形；
- round：圆形。 | +| updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。
- false：新增删除item时无过渡动效。
- true：新增删除item时播放过程动效。 | +| chainanimation5+ | boolean | false | 否 | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
- false：不启用链式联动
- true：启用链式联动
不支持动态修改。
同时配置了indexer，链式动效不生效。
如配置了链式动效，list-item的sticky不生效。 | +| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。 | +| initialoffset | <length> | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。 | +| selected5+ | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 | ## 样式 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| divider-color5+ | <color> | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 | -| divider-height5+ | <length> | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 | -| divider-length5+ | <length> | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 | -| divider-origin5+ | <length> | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。 | -| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：
- column：主轴为纵向。
- row：主轴为横向。
其他组件默认值为row，在list组件中默认值为column。 | -| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 设置多列时，在list交叉轴上进行均分，每一列大小相同。 | -| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：
- stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start：元素向交叉轴起点对齐。
- flex-end：元素向交叉轴终点对齐。
- center：元素在交叉轴居中。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 | -| item-extent | <length> \| <percentage> | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 | -| fade-color | <color> | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 | -| scrollbar-color6+ | <color> | - | 否 | 设置滚动条的颜色。 | -| scrollbar-width6+ | <length> | - | 否 | 设置滚动条的宽度。 | -| scrollbar-offset6+ | <length> | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------------------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- | +| divider-color5+ | <color> | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 | +| divider-height5+ | <length> | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 | +| divider-length5+ | <length> | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 | +| divider-origin5+ | <length> | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。 | +| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：
- column：主轴为纵向。
- row：主轴为横向。
其他组件默认值为row，在list组件中默认值为column。 | +| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。
设置多列时，在list交叉轴上进行均分，每一列大小相同。 | +| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：
- stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start：元素向交叉轴起点对齐。
- flex-end：元素向交叉轴终点对齐。
- center：元素在交叉轴居中。
align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 | +| item-extent | <length> \| <percentage> | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 | +| fade-color | <color> | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 | +| scrollbar-color6+ | <color> | - | 否 | 设置滚动条的颜色。 | +| scrollbar-width6+ | <length> | - | 否 | 设置滚动条的宽度。 | +| scrollbar-offset6+ | <length> | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 | ## 事件 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| indexerchange5+ | { local: booleanValue } | 多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：
- true: 当前展示本地索引。
- false: 当前展示字母索引。 | -| scroll | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | 列表滑动的偏移量和状态回调。
stateValue: 0表示列表滑动已经停止。
stateValue: 1表示列表正在用户触摸状态下滑动。
stateValue: 2表示列表正在用户松手状态下滑动。 | -| scrollbottom | - | 当前列表已滑动到底部位置。 | -| scrolltop | - | 当前列表已滑动到顶部位置。 | -| scrollend | - | 列表滑动已经结束。 | -| scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 | -| requestitem | - | 请求创建新的list-item。
长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。 | -| rotate7+ | { rotateValue: number } | 返回表冠旋转角度增量值，仅智能穿戴支持。 | +| 名称 | 参数 | 描述 | +| -------------------------- | ---------------------------------------- | ---------------------------------------- | +| indexerchange5+ | { local: booleanValue } | 多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：
- true: 当前展示本地索引。
- false: 当前展示字母索引。 | +| scroll | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | 列表滑动的偏移量和状态回调。
stateValue: 0表示列表滑动已经停止。
stateValue: 1表示列表正在用户触摸状态下滑动。
stateValue: 2表示列表正在用户松手状态下滑动。 | +| scrollbottom | - | 当前列表已滑动到底部位置。 | +| scrolltop | - | 当前列表已滑动到顶部位置。 | +| scrollend | - | 列表滑动已经结束。 | +| scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 | +| requestitem | - | 请求创建新的list-item。
长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。 | +| rotate7+ | { rotateValue: number } | 返回表冠旋转角度增量值，仅智能穿戴支持。 | ## 方法 支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| scrollTo | { index: number(指定位置) } | list滑动到指定index的item位置。 | -| scrollTop | { smooth: boolean } | smooth缺省为false，表示直接滚动到顶部。
smooth为true，表示平滑滚动到顶部。 | -| scrollBottom | { smooth: boolean } | smooth缺省为false，表示直接滚动到底部。
smooth为true，表示平滑滚动到底部。 | -| scrollPage | { reverse: boolean, smooth: boolean } | reverse缺省值为false，表示下一页，无完整页则滚动到底部。
reverse为true，表示上一页，无完整页则滚动到顶部。
smooth缺省值为false，表示直接滚动一页。
smooth为true，表示平滑滚动一页。 | -| scrollArrow | { reverse: boolean, smooth: boolean } | reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。
reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。
smooth缺省值为false，表示直接滚动。
smooth为true，表示平滑滚动。 | -| collapseGroup | { groupid: string } | 收拢指定的group。
groupid：需要收拢的group的id。
当groupid未指定时收拢所有的group。 | -| expandGroup | { groupid: string } | 展开指定的group。
groupid：需要展开的group的id。
当groupid未指定时展开所有的group。 | -| currentOffset | - | 返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表 currentOffset返回对象属性说明。 | +| 名称 | 参数 | 描述 | +| ------------- | ---------------------------------------- | ---------------------------------------- | +| scrollTo | { index: number(指定位置) } | list滑动到指定index的item位置。 | +| scrollTop | { smooth: boolean } | smooth缺省为false，表示直接滚动到顶部。
smooth为true，表示平滑滚动到顶部。 | +| scrollBottom | { smooth: boolean } | smooth缺省为false，表示直接滚动到底部。
smooth为true，表示平滑滚动到底部。 | +| scrollPage | { reverse: boolean, smooth: boolean } | reverse缺省值为false，表示下一页，无完整页则滚动到底部。
reverse为true，表示上一页，无完整页则滚动到顶部。
smooth缺省值为false，表示直接滚动一页。
smooth为true，表示平滑滚动一页。 | +| scrollArrow | { reverse: boolean, smooth: boolean } | reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。
reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。
smooth缺省值为false，表示直接滚动。
smooth为true，表示平滑滚动。 | +| collapseGroup | { groupid: string } | 收拢指定的group。
groupid：需要收拢的group的id。
当groupid未指定时收拢所有的group。 | +| expandGroup | { groupid: string } | 展开指定的group。
groupid：需要展开的group的id。
当groupid未指定时展开所有的group。 | +| currentOffset | - | 返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表 currentOffset返回对象属性说明。 | **表1** currentOffset返回对象属性说明 -| 名称 | 类型 | 备注 | -| -------- | -------- | -------- | -| x | number | 当前x轴滑动偏移量，单位为px。 | -| y | number | 当前y轴滑动偏移量，单位为px。 | +| 名称 | 类型 | 备注 | +| ---- | ------ | ---------------- | +| x | number | 当前x轴滑动偏移量，单位为px。 | +| y | number | 当前y轴滑动偏移量，单位为px。 | ## 示例 -``` +```html
@@ -111,23 +111,7 @@
``` - -``` -// index.js -export default { - data: { - todolist: [{ - title: '刷题', - date: '2021-12-31 10:00:00', - }, { - title: '看电影', - date: '2021-12-31 20:00:00', - }], - }, -} -``` - -``` +```css /* index.css */ .container { display: flex; @@ -152,4 +136,21 @@ export default { } ``` +```js +// index.js +export default { + data: { + todolist: [{ + title: '刷题', + date: '2021-12-31 10:00:00' + }, { + title: '看电影', + date: '2021-12-31 20:00:00' + }], + }, +} +``` + + + ![zh-cn_image_0000001185033226](figures/zh-cn_image_0000001185033226.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md index 8aae0c407cb8d1b82fcfad82c537237a8266bb9e..f0551e6a75a7da72256e7cf60d35a2863e9031c9 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md @@ -82,65 +82,70 @@ ## 示例 -``` +```html
-
- -
- -
-
- Simple panel in {{modeFlag}} mode -
-
- -
+
+
- + +
+
+ Simple panel in {{ modeFlag }} mode +
+
+ +
+
+
``` -``` +```js /* xxx.css */ .doc-page { - flex-direction: column; - justify-content: center; - align-items: center; + flex-direction: column; + justify-content: center; + align-items: center; } + .btn-div { - width: 100%; - height: 200px; - flex-direction: column; - align-items: center; - justify-content: center; + width: 100%; + height: 200px; + flex-direction: column; + align-items: center; + justify-content: center; } + .txt { - color: #000000; - font-weight: bold; - font-size: 39px; + color: #000000; + font-weight: bold; + font-size: 39px; } + .panel-div { - width: 100%; - flex-direction: column; - align-items: center; + width: 100%; + flex-direction: column; + align-items: center; } + .inner-txt { - width: 100%; - height: 160px; - flex-direction: column; - align-items: center; - justify-content: center; + width: 100%; + height: 160px; + flex-direction: column; + align-items: center; + justify-content: center; } + .inner-btn { - width: 100%; - height: 120px; - justify-content: center; - align-items: center; + width: 100%; + height: 120px; + justify-content: center; + align-items: center; } ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md index c429f43f6206e954d0ce718eabbaac90f05c119f..2e9d58638dcbc075fcec859de6cfc0fa72ac3d0b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md @@ -1,9 +1,9 @@ # popup -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。 +气泡指示。给控件绑定气泡弹窗，并在点击控件或者调用气泡弹窗显示方法后弹出相应的气泡提示来引导用户进行操作。 ## 权限列表 @@ -21,13 +21,13 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | -| target | string | - | 是 | 目标元素的id属性值，不支持动态切换。 | -| placement | string | bottom | 否 | 弹出窗口位置。可选值为：
- left：位于目标元素左边；
- right：位于目标元素右边；
- top：位于目标元素上边；
- bottom：位于目标元素下边；
- topLeft：位于目标元素左上角；
- topRight：位于目标元素右上角；
- bottomLeft：位于目标元素左下角；
- bottomRight：位于目标元素右下角。 | +| target | string | - | 是 | popup绑定目标元素的id属性值，不支持动态切换。 | +| placement | string | bottom | 否 | popup相对于目标元素的位置。可选值为：
- left：位于目标元素左边；
- right：位于目标元素右边；
- top：位于目标元素上边；
- bottom：位于目标元素下边；
- topLeft：位于目标元素左上角；
- topRight：位于目标元素右上角；
- bottomLeft：位于目标元素左下角；
- bottomRight：位于目标元素右下角。 | | keepalive5+ | boolean | false | 否 | 设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。 | -| clickable5+ | boolean | true | 否 | popup是否使用点击弹窗，当设置为false时，只支持方法调用显示。 | +| clickable5+ | boolean | true | 否 | popup是否支持点击目标元素弹窗，当设置为false时，只支持方法调用显示弹窗。 | | arrowoffset5+ | <length> | 0 | 否 | popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > > - 不支持focusable属性。 @@ -40,7 +40,7 @@ | -------- | -------- | -------- | -------- | -------- | | mask-color | <color> | - | 否 | 遮罩层的颜色，默认值为全透明。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > > - 不支持position相关样式。 @@ -61,9 +61,9 @@ | 名称 | 参数 | 描述 | | -------- | -------- | -------- | | show5+ | - | 弹出气泡提示。 | -| hide5+ | - | 取消气泡提示。 | +| hide5+ | - | 隐藏气泡提示。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 1. popup气泡弹窗属性、样式均不支持动态更新。 > > 2. popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。 @@ -75,7 +75,7 @@ ## 示例 -``` +```html
Click to show the pop-up @@ -88,7 +88,7 @@
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -108,14 +108,14 @@ } ``` -``` +```js // xxx.js import prompt from '@system.prompt' export default { visibilitychange(e) { prompt.showToast({ message: 'visibility change visibility: ' + e.visibility, - duration: 3000, + duration: 3000 }); }, showpopup() { @@ -123,7 +123,7 @@ export default { }, hidepopup() { this.$element("popup").hide(); - }, + } } ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md index c931d65811fbc3a27795028578e32a57849ac370..08011bdf1d4bb1e15445410a74a3b90a1f664f18 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md @@ -1,6 +1,6 @@ # refresh -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 下拉刷新容器。 @@ -22,9 +22,9 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | | offset | <length> | - | 否 | 刷新组件静止时距离父组件顶部的距离。 | -| refreshing | boolean | false | 否 | 用于标识刷新组件当前是否正在刷新。 | +| refreshing | boolean | false | 否 | 标识刷新组件当前是否正在刷新。 | | type | string | auto | 否 | 设置组件刷新时的动效。两个可选值，不支持动态修改。
- auto: 默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。
- pulldown: 列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。 | -| lasttime | boolean | false | 否 | 是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX ”，XXXX 按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。 | +| lasttime | boolean | false | 否 | 设置是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX ”，XXXX 按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。 | | timeoffset6+ | <length> | - | 否 | 设置更新时间距离父组件顶部的距离。 | | friction | number | 42 | 否 | 下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。 | @@ -35,8 +35,8 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | -| background-color | <color> | white
| 否 | 用于设置刷新组件的背景颜色。 | -| progress-color | <color> | black
| 否 | 用于设置刷新组件的loading颜色。 | +| background-color | <color> | white
| 否 | 设置刷新组件的背景颜色。 | +| progress-color | <color> | black
| 否 | 设置刷新组件的loading图标颜色。 | ## 事件 @@ -56,7 +56,7 @@ ## 示例 -``` +```html
@@ -71,7 +71,7 @@
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -104,7 +104,7 @@ } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md index 9481ba0c25f4bee0a81454b6217f29c23a2f4905..75c4249b57fe899efe5110456a38cf8948f5dff1 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md @@ -1,7 +1,7 @@ # stepper -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。 @@ -15,141 +15,177 @@ 仅支持<stepper-item>子组件。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 步骤导航器内的步骤顺序按照子组件<stepper-item>的顺序进行排序。 +> **说明：** +> 步骤导航器内的步骤顺序按照子组件<stepper-item>的顺序进行排序。 ## 属性 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| index | number | - | 设置步骤导航器步骤显示第几个stepper-item子组件。 | +| 名称 | 类型 | 默认值 | 描述 | +| ----- | ------ | ---- | ------------------------------ | +| index | number | 0 | 设置步骤导航器步骤显示第几个stepper-item子组件，默认显示第一个stepper-item。 | ## 样式 支持[通用样式](../arkui-js/js-components-common-styles.md)。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。 +> **说明：** +> stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。 ## 事件 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| finish | 无 | 当步骤导航器最后一个步骤完成时触发该事件。 | -| skip | 无 | 当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。 | -| change | { prevIndex：prevIndex, index: index} | 当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 | -| next | { index：index, pendingIndex: pendingIndex } | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 | -| back | { index：index, pendingIndex: pendingIndex } | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 | +| 名称 | 参数 | 描述 | +| ------ | ---------------------------------------- | ---------------------------------------- | +| finish | 无 | 当步骤导航器最后一个步骤完成时,触发该事件。 | +| skip | 无 | 当前步骤导航器下一步按钮状态为skip，即可跳过时，点击右侧跳过按钮触发该事件。 | +| change | { prevIndex：prevIndex, index: index} | 当用户点击步骤导航器的左边或者右边按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 | +| next | { index：index, pendingIndex: pendingIndex } | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将要跳转的序号，该事件有返回值，返回值格式为：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 | +| back | { index：index, pendingIndex: pendingIndex } | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将要跳转的序号，该事件有返回值，返回值格式为Object：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 | ## 方法 除支持[通用方法](../arkui-js/js-components-common-methods.md)外，支持如下方法： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| setNextButtonStatus | { status: string, label: label } | 设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：
1. normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；
2. disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；
3. waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
4. skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 | +| 名称 | 参数 | 描述 | +| ------------------- | ---------------------------------------- | ---------------------------------------- | +| setNextButtonStatus | { status: string, label: label } | 设置当前步骤中下一步按钮的文本与状态，参数中label为指定按钮文本，status指定按钮状态，status可选值为：
- normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；
- disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；
- waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
- skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 | ## 示例 -``` +```html -
- - -
- First screen -
- - - -
- Second screen -
- - - -
- Third screen -
- - - +
+ + +
+ Page One + +
+ + +
+ Page Two + +
+ + +
+ Page Three + +
+ +
``` -``` +```css /* xxx.css */ .container { - margin-top: 20px; - flex-direction: column; - align-items: center; - height: 300px; + flex-direction: column; + align-items: center; + height: 100%; + width: 100%; + background-color: #f7f7f7; +} +.stepper{ + width: 100%; + height: 100%; +} +.stepper-item { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; } -.stepperItem { - width: 100%; - flex-direction: column; - align-items: center; +.item{ + width: 90%; + height: 86%; + margin-top: 80px; + background-color: white; + border-radius: 60px; + flex-direction: column; + align-items: center; + padding-top: 160px; } -.stepperItemContent { - color: #0000ff; - font-size: 50px; - justify-content: center; +text { + font-size: 78px; + color: #182431; + opacity: 0.4; } .button { - width: 60%; - margin-top: 30px; - justify-content: center; + width: 40%; + margin-top: 100px; + justify-content: center; } ``` -``` +```js // xxx.js +import prompt from '@system.prompt'; + export default { - data: { - label_1: - { - prevLabel: 'BACK', - nextLabel: 'NEXT', - status: 'normal' - }, - label_2: - { - prevLabel: 'BACK', - nextLabel: 'NEXT', - status: 'normal' - }, - label_3: - { - prevLabel: 'BACK', - nextLabel: 'NEXT', - status: 'normal' - }, - }, - setRightButton(e) { - this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'}); - }, - nextclick(e) { - var index = { - pendingIndex: e.pendingIndex - } - return index; - }, - backclick(e) { - var index = { - pendingIndex: e.pendingIndex + data: { + label_1: + { + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + }, + label_2: + { + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + }, + label_3: + { + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + } + }, + setRightButton(e) { + this.$element('mystepper').setNextButtonStatus({ + status: 'waiting', label: 'SKIP' + }); + }, + nextclick(e) { + var index = { + pendingIndex: e.pendingIndex + } + return index; + }, + backclick(e) { + var index = { + pendingIndex: e.pendingIndex + } + return index; + }, + statuschange(e) { + prompt.showToast({ + message: '上一步序号' + e.prevIndex + '当前序号' + e.index + }) + }, + finish() { + prompt.showToast({ + message: '最后一步已完成' + }) + }, + skip() { + prompt.showToast({ + message: 'skip触发' + }) } - return index; - }, } ``` -![zh-cn_image_0000001127125114](figures/zh-cn_image_0000001127125114.gif) +![](figures/stepper.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md index 93ce100f89815bdad0f1ce4fdf8795d6a067743a..f6ade11eb5d66a0c7f4d1f7dfe7376687f437084 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md @@ -12,7 +12,7 @@ tab页签容器。 ## 子组件 -仅支持最多一个<[tab-bar](../arkui-js/js-components-container-tab-bar.md)>和最多一个<[tab-content](../arkui-js/js-components-container-tab-content.md)>。 +仅支持<[tab-bar](../arkui-js/js-components-container-tab-bar.md)>和<[tab-content](../arkui-js/js-components-container-tab-content.md)>。 ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md index 442c2108d5b234ae2ff8f5d95731eef2aec99aa2..78cf781725bef04d3af28bdeeff540abdaa8c15b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md @@ -37,10 +37,8 @@ export default { console.log("组件创建") }, onAttached() { - this.value = "组件挂载" - }, - onDetached() { - this.value = "" + this.value = "组件挂载", + console.log("组件挂载") }, onShow() { console.log("Page显示") diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md b/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md index ed78e584cda4e427b4e3f43a468d066a5ab295bf..2d2783562e5b69b51a02a734b370b3a1ed8b03b4 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md @@ -5,15 +5,6 @@ > > - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > -> - 需要在config.json对应的"abilities"中设置"configChanges"属性为"orientation" -> ``` -> "abilities": [ -> { -> "configChanges": ["orientation"], -> ... -> } -> ] -> ``` 视频播放组件。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md index 0c6874915cdc24d394332d087e97a38b9ff26a05..4c508d2e904f7bc86f5c4aae41ea41e349464323 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md @@ -37,7 +37,7 @@ - + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md index cae336c9b05042825aac304e7d661c443e38829f..4e2fb75587072528acc41fedb408bf3db9588403 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md @@ -193,6 +193,7 @@ transform动效，支持的组件范围： dur="3s" repeatCount="indefinite"> + animate-transform diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md index cf6779fb5069197f1913c192007e776a2070334d..bb7629a674cfa480cb278b27eeb125269db02855 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md @@ -97,9 +97,9 @@ textpath与tspan组合示例与效果图
- + - + This is TextPath. This is tspan onTextPath. Let's play. @@ -117,11 +117,11 @@ textpath与tspan组合示例与效果图
- + - + This is TextPath. This is first tspan. This is second tspan. @@ -172,10 +172,10 @@ textpath与tspan组合属性动画与效果图
- + - + This is TextPath. tspan attribute x|rotate @@ -209,11 +209,11 @@ textpath与tspan组合属性动画与效果图
- - + This is TextPath. tspan attribute fill|fill-opacity @@ -247,11 +247,11 @@ textpath与tspan组合属性动画与效果图
- - + This is TextPath. tspan attribute stroke diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg.md index a44fed0e5caee70217c41e0f045ff4a1d0074a78..2ec82e8ab6dcafd56cae3e4df9092de47d3bf464 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg.md @@ -15,7 +15,7 @@ ## 子组件 -支持[svg](js-components-svg.md)、[rect](js-components-svg-rect.md)、[circle](js-components-svg-circle.md)、[ellipse](../arkui-js/js-components-svg-ellipse.md)、[path](js-components-svg-path.md)、[line](../arkui-js/js-components-svg-line.md)、[polygon](../arkui-js/js-components-svg-polygon.md)、[polyline](js-components-svg-polyline.md)、[text](js-components-svg-text.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animateTransform.md)。 +支持[svg](js-components-svg.md)、[rect](js-components-svg-rect.md)、[circle](js-components-svg-circle.md)、[ellipse](../arkui-js/js-components-svg-ellipse.md)、[path](js-components-svg-path.md)、[line](../arkui-js/js-components-svg-line.md)、[polygon](../arkui-js/js-components-svg-polygon.md)、[polyline](js-components-svg-polyline.md)、[text](js-components-svg-text.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animatetransform.md)。 ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/NestedScroll.gif b/zh-cn/application-dev/reference/arkui-ts/figures/NestedScroll.gif new file mode 100644 index 0000000000000000000000000000000000000000..4d8b706114c0bca1218f13085c7890d46c96ab28 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/NestedScroll.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/contextmenu_close.gif b/zh-cn/application-dev/reference/arkui-ts/figures/contextmenu_close.gif new file mode 100644 index 0000000000000000000000000000000000000000..424f418c9d18997a3ed29eb777ffb4817d1b2dc4 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/contextmenu_close.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md index a12e81990fbae5ca7132a4c8e61e367ca605c97e..b847e22feb0f75bea630f7f5c66c0de4721ec24a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md @@ -16,7 +16,7 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb | --------- | ------------ | ---- | ------------------------------------------------------------ | | fingers | number | 否 | 触发拖动的最少手指数，最小为1指， 最大取值为10指。
默认值：1 | | direction | PanDirection | 否 | 触发拖动的手势方向，此枚举值支持逻辑与(&)和逻辑或（\|）运算。
默认值：PanDirection.All | -| distance | number | 否 | 最小拖动识别距离，单位为vp。
默认值：5.0
**说明：**
> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 | +| distance | number | 否 | 最小拖动识别距离，单位为vp。
默认值：5.0
**说明：**
> [Tabs组件](ts-container-tabs.md)滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 | ## PanDirection枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md index 8c2e8326f92f31ffd44a76c2058ca675eb3923de..7e6742c29566fbe82a4e649847e7a18be937db4f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md @@ -45,7 +45,7 @@ struct RotationGestureExample { .padding(20) .border({ width: 3 }) .margin(80) - .rotate({ angle: this.angle }) + .rotate({ z: 1, angle: this.angle }) // 双指旋转触发该手势事件 .gesture( RotationGesture() diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md index 6e80bd15f0f135cadbcde99bbdeafaf9fa8cd73a..62c57ef62a341681279c47b3ef005e1fca0093b4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md @@ -52,7 +52,7 @@ struct SwipeGestureExample { .width(300) .height(200) .margin(100) - .rotate({ angle: this.rotateAngle }) + .rotate({ z: 1, angle: this.rotateAngle }) // 单指竖直方向滑动时触发该事件 .gesture( SwipeGesture({ direction: SwipeDirection.Vertical }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index ceae2d978c1665d36ae8918c70151695097d2d32..4614d3e606d63124c3c16408250546e055454490 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -305,9 +305,7 @@ struct CanvasExample { this.context.moveTo(140, 10) this.context.lineTo(140, 160) this.context.stroke() - this.context.font = '18px sans-serif' - this.context.textAlign = 'start' this.context.fillText('textAlign=start', 140, 60) this.context.textAlign = 'end' @@ -350,9 +348,7 @@ struct TextBaseline { this.context.moveTo(0, 120) this.context.lineTo(400, 120) this.context.stroke() - this.context.font = '20px sans-serif' - this.context.textBaseline = 'top' this.context.fillText('Top', 10, 120) this.context.textBaseline = 'bottom' @@ -426,7 +422,7 @@ struct LineDashOffset { .onReady(() =>{ this.context.arc(100, 75, 50, 0, 6.28) this.context.setLineDash([10,20]) - this.context.lineDashOffset = 10.0; + this.context.lineDashOffset = 10.0 this.context.stroke(); }) } @@ -498,8 +494,8 @@ struct GlobalCompositeOperation { @Entry @Component struct ShadowBlur { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -765,8 +761,8 @@ clearRect(x: number, y: number, w: number, h: number): void @Entry @Component struct ClearRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -808,8 +804,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void @Entry @Component struct FillText { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -853,8 +849,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void @Entry @Component struct StrokeText { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -922,8 +918,8 @@ measureText(text: string): TextMetrics @Entry @Component struct MeasureText { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1284,8 +1280,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void @Entry @Component struct QuadraticCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1294,10 +1290,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.context.beginPath(); - this.context.moveTo(20, 20); - this.context.quadraticCurveTo(100, 100, 200, 20); - this.context.stroke(); + this.context.beginPath() + this.context.moveTo(20, 20) + this.context.quadraticCurveTo(100, 100, 200, 20) + this.context.stroke() }) } .width('100%') @@ -1390,9 +1386,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.context.moveTo(100, 20); - this.context.arcTo(150, 20, 150, 70, 50); - this.context.stroke(); + this.context.moveTo(100, 20) + this.context.arcTo(150, 20, 150, 70, 50) + this.context.stroke() }) } .width('100%') @@ -1571,17 +1567,17 @@ struct Fill { .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - let region = new Path2D(); - region.moveTo(30, 90); - region.lineTo(110, 20); - region.lineTo(240, 130); - region.lineTo(60, 130); - region.lineTo(190, 20); - region.lineTo(270, 90); - region.closePath(); + let region = new Path2D() + region.moveTo(30, 90) + region.lineTo(110, 20) + region.lineTo(240, 130) + region.lineTo(60, 130) + region.lineTo(190, 20) + region.lineTo(270, 90) + region.closePath() // Fill path - this.context.fillStyle = 'green'; - this.context.fill(region, "evenodd"); + this.context.fillStyle = 'green' + this.context.fill(region, "evenodd") }) } .width('100%') @@ -1666,9 +1662,9 @@ struct Clip { .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - let region = new Path2D(); - region.rect(80,10,20,130); - region.rect(40,50,100,50); + let region = new Path2D() + region.rect(80,10,20,130) + region.rect(40,50,100,50) this.context.clip(region,"evenodd") this.context.fillStyle = "rgb(255,0,0)" this.context.fillRect(0, 0, this.context.width, this.context.height) @@ -1995,9 +1991,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: @Entry @Component struct ImageExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -2006,7 +2002,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.context.drawImage( this.img,0,0,500,500,0,0,400,200); + this.context.drawImage( this.img,0,0,500,500,0,0,400,200) }) } .width('100%') @@ -2099,8 +2095,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData @Entry @Component struct GetImageData { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") build() { @@ -2110,9 +2106,9 @@ struct GetImageData { .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.context.drawImage(this.img,0,0,130,130); - var imagedata = this.context.getImageData(50,50,130,130); - this.context.putImageData(imagedata,150,150); + this.context.drawImage(this.img,0,0,130,130) + var imagedata = this.context.getImageData(50,50,130,130) + this.context.putImageData(imagedata,150,150) }) } .width('100%') @@ -2379,7 +2375,7 @@ struct ToDataURL { .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - var dataURL = this.context.toDataURL(); + var dataURL = this.context.toDataURL() }) } .width('100%') @@ -2413,11 +2409,11 @@ restore(): void .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.context.save(); // save the default state - this.context.fillStyle = "green"; - this.context.fillRect(20, 20, 100, 100); - this.context.restore(); // restore to the default state - this.context.fillRect(150, 75, 100, 100); + this.context.save() // save the default state + this.context.fillStyle = "green" + this.context.fillRect(20, 20, 100, 100) + this.context.restore() // restore to the default state + this.context.fillRect(150, 75, 100, 100) }) } .width('100%') @@ -2451,11 +2447,11 @@ save(): void .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.context.save(); // save the default state - this.context.fillStyle = "green"; - this.context.fillRect(20, 20, 100, 100); - this.context.restore(); // restore to the default state - this.context.fillRect(150, 75, 100, 100); + this.context.save() // save the default state + this.context.fillStyle = "green" + this.context.fillRect(20, 20, 100, 100) + this.context.restore() // restore to the default state + this.context.fillRect(150, 75, 100, 100) }) } .width('100%') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md index dc5029f9e3ba5eea1a5b7c8c85d6c52fec32a218..0d45ec8a3fb0e733656790d1b5a3e6267c886be2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md @@ -61,7 +61,7 @@ struct GestureGroupExample { .margin(20) .border({ width: 3, style: this.borderStyles }) .gesture( - //以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件 + // 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件 GestureGroup(GestureMode.Sequence, LongPressGesture({ repeat: true }) .onAction((event: GestureEvent) => { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md index 45df677743928861d9770d41a1acdb84095d001b..62da61d3cda305a03fa7552b526af42c17c61d12 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md @@ -17,40 +17,41 @@ addColorStop(offset: number, color: string): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | --------- | ---------------------------- | - | offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 | - | color | string | 是 | '#ffffff' | 设置渐变的颜色。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | --------- | ---------------------------- | +| offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 | +| color | string | 是 | '#ffffff' | 设置渐变的颜色。 | **示例：** ```ts - // xxx.ets - @Entry - @Component - struct Page45 { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var grad = this.context.createLinearGradient(50,0, 300,100) - grad.addColorStop(0.0, 'red') - grad.addColorStop(0.5, 'white') - grad.addColorStop(1.0, 'green') - this.context.fillStyle = grad - this.context.fillRect(0, 0, 500, 500) - }) - } - .width('100%') - .height('100%') - }} +// xxx.ets +@Entry +@Component +struct Page45 { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() => { + var grad = this.context.createLinearGradient(50, 0, 300, 100) + grad.addColorStop(0.0, 'red') + grad.addColorStop(0.5, 'white') + grad.addColorStop(1.0, 'green') + this.context.fillStyle = grad + this.context.fillRect(0, 0, 500, 500) + }) + } + .width('100%') + .height('100%') + } +} ``` ![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md index 895184056c41747c9a5f970c89882c7cf4b7cc6e..59b184476c6458269984d678abb4df476e9b576c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md @@ -37,7 +37,7 @@ Navigator(value?: {target: string, type?: NavigationType}) | 名称 | 参数 | 描述 | | ------ | ------- | ------------------------------------------------------------ | | active | boolean | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 | -| params | object | 跳转时要同时传递到目标页面的数据，可在目标页面使用[router.getParams()](../apis/js-api-router.md#routergetparams)获得。 | +| params | object | 跳转时要同时传递到目标页面的数据，可在目标页面使用[router.getParams()](../apis/js-apis-router.md#routergetparams)获得。 | | target | string | 设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。 | | type | [NavigationType](#navigationtype枚举说明) | 设置路由方式。
默认值：NavigationType.Push | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md index b6e0e30f1490ec2b2a80d57893ee97f41058d19d..1ccfeedd4439c9acc61061fadd90fa8c44e00cff 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -22,30 +22,30 @@ Scroll(scroller?: Scroller) 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 名称 | 参数类型 | 描述 | -| -------------- | ---------------------------------------- | --------- | -| scrollable | [ScrollDirection](#scrolldirection枚举说明) | 设置滚动方向。
默认值：ScrollDirection.Vertical | -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Auto | -| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 | -| scrollBarWidth | string \| number | 设置滚动条的宽度。 | -| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.None | +| 名称 | 参数类型 | 描述 | +| -------------- | ---------------------------------------- | ---------------------------------------- | +| scrollable | [ScrollDirection](#scrolldirection枚举说明) | 设置滚动方向。
默认值：ScrollDirection.Vertical | +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Auto | +| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 | +| scrollBarWidth | string \| number | 设置滚动条的宽度。 | +| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.None | ## ScrollDirection枚举说明 -| 名称 | 描述 | -| ---------- | ------------------------ | -| Horizontal | 仅支持水平方向滚动。 | -| Vertical | 仅支持竖直方向滚动。 | -| None | 不可滚动。 | -| Free(deprecated) | 支持竖直或水平方向滚动
从API version 9开始废弃| +| 名称 | 描述 | +| ---------------------------- | ----------------------------------- | +| Horizontal | 仅支持水平方向滚动。 | +| Vertical | 仅支持竖直方向滚动。 | +| None | 不可滚动。 | +| Free(deprecated) | 支持竖直或水平方向滚动
从API version 9开始废弃 | ## 事件 -| 名称 | 功能描述 | -| ------------------------------------------------------------ | ------------------------------------------------------------ | +| 名称 | 功能描述 | +| ---------------------------------------- | ---------------------------------------- | | onScrollBegin9+(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | 滚动开始事件回调。
参数：
- dx：即将发生的水平方向滚动量。
- dy：即将发生的竖直方向滚动量。
返回值：
- dxRemain：水平方向滚动剩余量。
- dyRemain：竖直方向滚动剩余量。 | -| onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调, 返回滚动时水平、竖直方向偏移量。 | -| onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。 | -| onScrollEnd(event: () => void) | 滚动停止事件回调。 | +| onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调, 返回滚动时水平、竖直方向偏移量。 | +| onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。 | +| onScrollEnd(event: () => void) | 滚动停止事件回调。 | > **说明：** > @@ -72,11 +72,11 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation? **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| xOffset | Length | 是 | 水平滑动偏移。 | -| yOffset | Length | 是 | 竖直滑动偏移。 | -| animation | {
duration: number,
curve: [Curve](ts-animatorproperty.md)
} | 否 | 动画配置：
- duration: 滚动时长设置。
- curve: 滚动曲线设置。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| --------- | ---------------------------------------- | ---- | ---------------------------------------- | +| xOffset | Length | 是 | 水平滑动偏移。 | +| yOffset | Length | 是 | 竖直滑动偏移。 | +| animation | {
duration: number,
curve: [Curve](ts-animatorproperty.md)
} | 否 | 动画配置：
- duration: 滚动时长设置。
- curve: 滚动曲线设置。 | ### scrollEdge @@ -88,8 +88,8 @@ scrollEdge(value: Edge): void **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| ----- | ---- | ---- | --------- | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ----- | --------------------------------- | ---- | --------- | | value | [Edge](ts-appendix-enums.md#edge) | 是 | 滚动到的边缘位置。 | @@ -101,10 +101,10 @@ scrollPage(value: { next: boolean, direction?: Axis }): void **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| --------- | ------- | ---- | ------------------------------ | -| next | boolean | 是 | 是否向下翻页。true表示向下翻页，false表示向上翻页。 | -| direction(deprecated) | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滚动方向为水平或竖直方向。
从API version 9开始废弃 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| --------------------------------- | --------------------------------- | ---- | --------------------------------------- | +| next | boolean | 是 | 是否向下翻页。true表示向下翻页，false表示向上翻页。 | +| direction(deprecated) | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滚动方向为水平或竖直方向。
从API version 9开始废弃 | ### currentOffset @@ -135,9 +135,9 @@ scrollToIndex(value: number): void **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| ------ | -------- | ---- | ---------------------------------- | -| value | number | 是 | 要滑动到的列表项在列表中的索引值。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ----- | ------ | ---- | ----------------- | +| value | number | 是 | 要滑动到的列表项在列表中的索引值。 | ### scrollBy9+ @@ -154,10 +154,10 @@ scrollBy(dx: Length, dy: Length): void **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| ----- | ------ | ---- | ----------------- | -| dx | Length | 是 | 水平方向滚动距离，不支持百分比形式。 | -| dy | Length | 是 | 竖直方向滚动距离，不支持百分比形式。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ---- | ------ | ---- | ------------------ | +| dx | Length | 是 | 水平方向滚动距离，不支持百分比形式。 | +| dy | Length | 是 | 竖直方向滚动距离，不支持百分比形式。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md index 965f8428d3bee2aa6c2a17d0b273abf830a2ebae..3e9196ca62f8884bf9f1d2c1081b1a7d95962bfb 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md @@ -21,7 +21,8 @@ Circle(options?: {width?: string | number, height?: string | number}) -## 参数 +**参数：** + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | | width | string \| number | 否 | 0 | 宽度。 | @@ -32,19 +33,19 @@ Circle(options?: {width?: string | number, height?: string | number}) 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | -------- | -------- | -------- | -------- | -| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | -| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框。 | -| strokeDashArray | Array<Length> | [] | 否 | 设置边框间隙。 | -| strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 | -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 | -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 | -| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | -| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 | -| strokeWidth | Length | 1 | 否 | 设置边框宽度。 | -| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置边框颜色，不设置时，默认没有边框。 | +| strokeDashArray | Array<Length> | [] | 设置边框间隙。 | +| strokeDashOffset | number \| string | 0 | 边框绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 设置斜接长度与边框宽度比值的极限值。
**说明：**
Circle组件无法设置尖角图形，该属性设置无效。 | +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置边框透明度。
**说明：**
该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 | +| strokeWidth | Length | 1 | 设置边框宽度。 | +| antiAlias | boolean | true | 是否开启抗锯齿效果。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md index 56b90bf489c99064fadb06c8d0f0e6321d6920b6..7c97af4a0f7da0ffc1e25a6220e1fec6d5c116b3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md @@ -22,30 +22,31 @@ ellipse(options?: {width?: string | number, height?: string | number}) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | 否 | 0 | 宽度。 | +| height | string \| number | 否 | 0 | 高度。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | -------- | -------- | -------- | -------- | -| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | -| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 |设置边框颜色，不设置时，默认没有边框。 | -| strokeDashArray | Array<Length> | [] | 否 | 设置边框间隙。 | -| strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 | -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 | -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 | -| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | -| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 | -| strokeWidth | Length | 1 | 否 | 设置边框宽度。 | -| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - |设置边框颜色，不设置时，默认没有边框。 | +| strokeDashArray | Array<Length> | [] | 设置边框间隙。 | +| strokeDashOffset | number \| string | 0 | 边框绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 设置斜接长度与边框宽度比值的极限值。
**说明：**
Ellipse组件无法设置尖角图形，该属性设置无效。 | +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置边框透明度。
**说明：**
该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 | +| strokeWidth | Length | 1 | 设置边框宽度。 | +| antiAlias | boolean | true | 是否开启抗锯齿效果。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md index 245d31eae9f9867063f369e22a407a031dd43a6d..b83e56fcc54f5d58e1d858ab96c84012fd7e9d3f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -21,32 +21,33 @@ Line(options?: {width?: string | number, height?: string | number}) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | 否 | 0 | 宽度。 | +| height | string \| number | 否 | 0 | 高度。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | -------- | -------- | -------- | -------- | -| startPoint | Array | [0, 0] | 是 | 直线起点坐标点(相对坐标)。 | -| endPoint | Array | [0, 0] | 是 | 直线终点坐标点(相对坐标)。 | -| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | -| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | -| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | -| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | -| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | -| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | -| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | -| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| startPoint | Array | [0, 0] | 直线起点坐标点(相对坐标)。 | +| endPoint | Array | [0, 0] | 直线终点坐标点(相对坐标)。 | +| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。
**说明：**
Line组件无法形成闭合区域，该属性设置无效。 | +| fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。
**说明：**
Line组件无法形成闭合区域，该属性设置无效。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 设置锐角绘制成斜角的极限值。
**说明：**
Line组件无法设置锐角图形，该属性设置无效。 | +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置线条透明度。
**说明：**
该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 | +| strokeWidth | Length | 1 | 设置线条宽度。 | +| antiAlias | boolean | true | 是否开启抗锯齿效果。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md index ab5fc7f60781604ec3507079aaee86ae2bad8b47..5956a775fe885f10ce67dc4e53a7794654b588aa 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -16,34 +16,34 @@ Path(value?: { width?: number | string; height?: number | string; commands?: string }) -- 参数 +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | ---- | ------ | -------------------- | +| width | number \| string | 否 | 0 | 路径所在矩形的宽度 | +| height | number \| string | 否 | 0 | 路径所在矩形的高度 | +| commands | string | 否 | '' | 路径绘制的命令字符串 | - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | ---- | ------ | -------------------- | - | width | number \| string | 否 | 0 | 路径所在矩形的宽度 | - | height | number \| string | 否 | 0 | 路径所在矩形的高度 | - | commands | string | 否 | '' | 路径绘制的命令字符串 | - ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- | -| commands | string | '' | 否 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 | -| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | -| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 | -| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | -| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | -| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | -| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | -| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | -| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | +| 名称 | 类型 | 默认值 | 描述 | +| -------- | ----------------------------------- | ---- | ---------------------------------------- | +| commands | string | '' | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 | +| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。
**说明：**
该属性取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 | +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置线条透明度。
**说明：**
该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 | +| strokeWidth | Length | 1 | 设置线条宽度。 | +| antiAlias | boolean | true | 是否开启抗锯齿效果。 | commands支持的绘制命令如下： diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md index 4bd7415fb552ecdff72011f2f23c5a7a057f8b1b..896ed6577e80408c637c49d8aea763871bc196e7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md @@ -21,29 +21,30 @@ Polygon(options?: {width?: string | number, height?: string | number}) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | 否 | 0 | 宽度。 | +| height | string \| number | 否 | 0 | 高度。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | | points | Array<Point> | [] | 否 | 多边形的顶点坐标列表。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | -| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | +| fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 | | strokeDashArray | Array<Length> | [] | 否 | 设置边框间隙。 | | strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 | -| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | -| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 | +| strokeMiterLimit | number \| string | 4 | 否 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。
**说明：**
该属性取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 | +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。
**说明：**
该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 | | strokeWidth | Length | 1 | 否 | 设置边框宽度。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md index f30e88962c288d32832d3698edf3a2707c2c281d..e685b9bba4a4540a279e1a0e5b8f9236359a46bd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md @@ -22,31 +22,32 @@ Polyline(options?: {width?: string | number, height?: string | number}) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | 否 | 0 | 宽度。 | +| height | string \| number | 否 | 0 | 高度。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | -------- | -------- | -------- | -------- | -| points | Array<Point> | [] | 否 | 折线经过坐标点列表。 | -| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | -| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 | -| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | -| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | -| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | -| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | -| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | -| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| points | Array<Point> | [] | 折线经过坐标点列表。 | +| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置线条颜色。 | +| strokeDashArray | Array<Length> | [] | 设置线条间隙。 | +| strokeDashOffset | number \| string | 0 | 线条绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。
**说明：**
该属性取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 | +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置线条透明度。
**说明：**
该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 | +| strokeWidth | Length | 1 | 设置线条宽度。 | +| antiAlias | boolean | true | 是否开启抗锯齿效果。 | ## Point diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md index ba85016bebb55c2f9824e977c2079122785bb5dd..b2e003f607ea6b99d3be85b7eb1b2ef3c2da083a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md @@ -23,36 +23,37 @@ Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array<string | number>} | {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | - | radius | string \| number \| Array<string \| number> | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 | - | radiusWidth | string \| number | 否 | 0 | 圆角宽度。 | - | radiusHeight | string \| number | 否 | 0 | 圆角高度。 | +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | 否 | 0 | 宽度。 | +| height | string \| number | 否 | 0 | 高度。 | +| radius | string \| number \| Array<string \| number> | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 | +| radiusWidth | string \| number | 否 | 0 | 圆角宽度。 | +| radiusHeight | string \| number | 否 | 0 | 圆角高度。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | -------- | -------- | -------- | -------- | -| radiusWidth | string \| number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 | -| radiusHeight | string \| number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 | -| radius | string \| number \| Array<string \| number> | 0 | 否 | 圆角半径大小。 | -| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | -| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 | -| strokeDashArray | Array<Length> | [] | 否 | 设置边框间隙。 | -| strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 | -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 | -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 | -| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | -| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 | -| strokeWidth | Length | 1 | 否 | 设置边框宽度。 | -| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | +| 名称 | 类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| radiusWidth | string \| number | 0 | 圆角的宽度，仅设置宽时宽高一致。 | +| radiusHeight | string \| number | 0 | 圆角的高度，仅设置高时宽高一致。 | +| radius | string \| number \| Array<string \| number> | 0 | 圆角半径大小。 | +| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 | +| fillOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 | +| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置边框颜色，不设置时，默认没有边框线条。 | +| strokeDashArray | Array<Length> | [] | 设置边框间隙。 | +| strokeDashOffset | number \| string | 0 | 边框绘制起点的偏移量。 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 | +| strokeMiterLimit | number \| string | 4 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。
**说明：**
该属性取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 | +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 设置边框透明度。
**说明：**
该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 | +| strokeWidth | Length | 1 | 设置边框宽度。 | +| antiAlias | boolean | true | 是否开启抗锯齿效果。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index c7675ae3c20054eb5ac0c32ecda23ca587627578..f93ebbc225beac76f421b415cd8af0a0f947ac56 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -25,17 +25,18 @@ Shape(value?: PixelMap) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | value | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 | +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| value | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | | viewPort | {
x?: number \| string,
y?: number \| string,
width?: number \| string,
height?: number \| string
} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | @@ -45,8 +46,8 @@ Shape(value?: PixelMap) | strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 | -| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。 | +| strokeMiterLimit | number \| string | 4 | 否 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。
**说明：**
该属性取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 | +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。
**说明：**
该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 | | strokeWidth | number \| string | 1 | 否 | 设置边框宽度。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | mesh8+ | Array<number>,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置，第二个参数为mesh矩阵列数column，第三个参数为mesh矩阵行数row。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md index c0e5c20d2a7943b9c2edc06516bba594c3a09e58..a23bcb78312dda19db43dfd5052cd0f5e8ed6037 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -73,6 +73,23 @@ struct AnimateToExample { } this.flag = !this.flag }) + Button('change rotate angle') + .margin(50) + .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }) + .onClick(() => { + animateTo({ + duration: 1200, + curve: Curve.Friction, + delay: 500, + iterations: -1, // 设置-1表示动画无限循环 + playMode: PlayMode.AlternateReverse, + onFinish: () => { + console.info('play end') + } + }, () => { + this.rotateAngle = 90 + }) + }) }.width('100%').margin({ top: 5 }) } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md index da58b8c0cd2e6baa7e6dc4a0f4256b67d38d1e8e..54ab6385bfbc0906568c6a5c38ef0fa20fa41b0b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md @@ -7,11 +7,6 @@ 列表弹窗。 -## 权限 - -无 - - ## ActionSheet.show show(value: { title: string | Resource, message: string | Resource, confirm?: {value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } }) @@ -34,8 +29,8 @@ show(value: { title: string | Resource, message: string  | 参数名 | 参数类型 | 必填 | 参数描述 | | ------ | ------------------------------------------------------------ | ---- | ----------------- | -| title | string \| [Resource](../../ui/ts-types.md#resource) | 是 | 选项的文本内容。 | -| icon | string \| [Resource](../../ui/ts-types.md#resource) | 否 | 选项的图标，默认无图标显示。 | +| title | string \| [Resource](ts-types.md#resource) | 是 | 选项的文本内容。 | +| icon | string \| [Resource](ts-types.md#resource) | 否 | 选项的图标，默认无图标显示。 | | action | ()=>void | 是 | 选项选中的回调。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md index 79531299e950767008dc4c755ef60140c816dfa5..9da423cfdb9880a5601668ca2b2a312e89b6a7ec 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md @@ -17,26 +17,38 @@ close(): void @Entry @Component struct Index { - @Builder MenuBuilder(){ + @Builder MenuBuilder() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Text('close') - .fontSize(30) - .fontWeight(FontWeight.Bold) - .onClick(() => { - ContextMenu.close(); - }) - }.height(400) - .backgroundColor(Color.Pink) + Button('Test ContextMenu1') + Divider().strokeWidth(2).margin(5) + Button('Test ContextMenu2') + Divider().strokeWidth(2).margin(5) + Button('Test ContextMenu3') + } + .width(200) + .height(160) } build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { - Column(){ - Text("Text") - }.bindContextMenu(this.MenuBuilder, ResponseType.LongPress) + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Column() { + Text("Test ContextMenu") + .fontSize(20) + .width('100%') + .height(500) + .backgroundColor(0xAFEEEE) + .textAlign(TextAlign.Center) + } + .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) + .onDragStart(() => { + // 拖拽时关闭菜单 + ContextMenu.close() + }) } .width('100%') .height('100%') } } ``` + +![contextmenu_close.gif](figures/contextmenu_close.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md index b6db6abeddf38be59ed681c901e5a5c0991527eb..5966e6a6f94e72426c5a8d3cc0f7cf2b828949db 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md @@ -42,15 +42,27 @@ extraParams是Json对象转换的string字符串，可以通过Json.parse转换 ```ts // xxx.ets +@Extend(Text) function textStyle () { + .width('25%') + .height(35) + .fontSize(16) + .textAlign(TextAlign.Center) + .backgroundColor(0xAFEEEE) +} + @Entry @Component struct DragExample { - @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']; - @State text: string = ''; - @State bool: boolean = false; - @State appleVisible: Visibility = Visibility.Visible; - @State orangeVisible: Visibility = Visibility.Visible; - @State bananaVisible: Visibility = Visibility.Visible; + @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'] + @State text: string = '' + @State bool: boolean = true + @State eventType: string = '' + @State appleVisible: Visibility = Visibility.Visible + @State orangeVisible: Visibility = Visibility.Visible + @State bananaVisible: Visibility = Visibility.Visible + private dragList: string[] = ['apple', 'orange', 'banana'] + @State fruitVisible: Visibility[] = [Visibility.Visible, Visibility.Visible, Visibility.Visible] + @State index: number = 0 // 自定义拖拽过程中显示的内容 @Builder pixelMapBuilder() { @@ -74,46 +86,29 @@ struct DragExample { .textAlign(TextAlign.Start) .margin(5) Row({ space: 15 }) { - Text('apple') - .width('25%') - .height(35) - .fontSize(16) - .textAlign(TextAlign.Center) - .backgroundColor(0xAFEEEE) - .visibility(this.appleVisible) - .onDragStart(() => { - this.bool = true; - this.text = 'apple'; - this.appleVisible = Visibility.None; - return this.pixelMapBuilder; - }) - Text('orange') - .width('25%') - .height(35) - .fontSize(16) - .textAlign(TextAlign.Center) - .backgroundColor(0xAFEEEE) - .visibility(this.orangeVisible) - .onDragStart(() => { - this.bool = true; - this.text = 'orange'; - this.orangeVisible = Visibility.None; - return this.pixelMapBuilder; - }) - Text('banana') - .width('25%') - .height(35) - .fontSize(16) - .textAlign(TextAlign.Center) - .backgroundColor(0xAFEEEE) - .visibility(this.bananaVisible) - .onDragStart((event: DragEvent, extraParams: string) => { - console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); - this.bool = true; - this.text = 'banana'; - this.bananaVisible = Visibility.None; - return this.pixelMapBuilder; - }) + ForEach(this.dragList, (item, index) => { + Text(item) + .textStyle() + .visibility(this.fruitVisible[index]) + .onDragStart(() => { + this.bool = true + this.text = item + this.fruitVisible[index] = Visibility.None + return this.pixelMapBuilder + }) + .onTouch((event: TouchEvent) => { + if (event.type === TouchType.Down) { + this.eventType = 'Down' + this.index = index + } + if (event.type === TouchType.Up) { + this.eventType = 'Up' + if (this.bool) { + this.fruitVisible[index] = Visibility.Visible + } + } + }) + }) }.padding({ top: 10, bottom: 10 }).margin(10) Text('This is a List element') @@ -142,21 +137,22 @@ struct DragExample { .padding(15) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) .onDragEnter((event: DragEvent, extraParams: string) => { - console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); + console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()) }) .onDragMove((event: DragEvent, extraParams: string) => { - console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); + console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()) }) .onDragLeave((event: DragEvent, extraParams: string) => { - console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); + console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()) }) .onDrop((event: DragEvent, extraParams: string) => { - var jsonString = JSON.parse(extraParams); + let jsonString = JSON.parse(extraParams); if (this.bool) { // 通过splice方法插入元素 - this.numbers.splice(jsonString.insertIndex, 0, this.text); - this.bool = false; + this.numbers.splice(jsonString.insertIndex, 0, this.text) + this.bool = false } + this.fruitVisible[this.index] = Visibility.None }) }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) } diff --git a/zh-cn/application-dev/ui/js-framework-syntax-js.md b/zh-cn/application-dev/ui/js-framework-syntax-js.md index 5eb1398708ea343b181a8a9abbe741996af64577..12e1bc8008a937595c791e88afb2c641f69916be 100644 --- a/zh-cn/application-dev/ui/js-framework-syntax-js.md +++ b/zh-cn/application-dev/ui/js-framework-syntax-js.md @@ -31,7 +31,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 示例代码 - ``` + ```js // app.js export default { onCreate() { @@ -51,7 +51,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 }; ``` - ``` + ```js // index.js页面逻辑代码 export default { data: { @@ -91,7 +91,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 示例代码 - ``` + ```js // index.js export default { data: { @@ -141,7 +141,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 示例： - ``` + ```js this.$rootElement().scrollTo({position: 0}) this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) ``` @@ -150,14 +150,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ## 获取DOM元素 1. 通过$refs获取DOM元素 - ``` + ```html
``` - ``` + ```js // index.js export default { data: { @@ -182,14 +182,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ``` 2. 通过$element获取DOM元素 - ``` + ```html
``` - ``` + ```js // index.js export default { data: { @@ -219,7 +219,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 根节点所在页面： -``` +```html
@@ -230,7 +230,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
``` -``` +```js // root.js export default { data: { @@ -243,25 +243,25 @@ export default { 自定义parent组件： -``` +```html
parent component click - hello parent component! + hello parent component!
``` -``` +```js // parent.js export default { data: { - show: false, + showValue: false, text: 'I am parent component!', }, parentClicked () { - this.show = !this.show; + this.showValue = !this.showValue console.info('parent component get parent text'); console.info(`${this.$parent().text}`); console.info("parent component get child function"); @@ -272,7 +272,7 @@ export default { 自定义child组件： -``` +```html
child component clicked @@ -280,7 +280,7 @@ export default {
``` -``` +```js // child.js export default { data: { diff --git a/zh-cn/application-dev/ui/ts-pixel-units.md b/zh-cn/application-dev/ui/ts-pixel-units.md index 0265bac90e606c4154c19cb85375e0c062ed009e..4d4055572b7165d20bde14f8b28c7a9a9f9e00cf 100644 --- a/zh-cn/application-dev/ui/ts-pixel-units.md +++ b/zh-cn/application-dev/ui/ts-pixel-units.md @@ -8,7 +8,7 @@ | px | 屏幕物理像素单位。 | | vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 | | fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 | -| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../ui/ts-framework-js-tag.md)配置）的比值。如配置designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 | +| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../quick-start/package-structure.md)配置）的比值。如配置designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 | ## 像素单位转换 diff --git a/zh-cn/application-dev/ui/ui-js-animate-svg.md b/zh-cn/application-dev/ui/ui-js-animate-svg.md index f4e20529894244958e7bfee674e8b4ac3eeb6cff..3eb1912243d82cf522362c811afbb25854d47534 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-svg.md +++ b/zh-cn/application-dev/ui/ui-js-animate-svg.md @@ -9,7 +9,7 @@ 在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。 -``` +```html
@@ -46,7 +46,7 @@ 在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)中，通过path设置动画变化的路径。 -``` +```html
@@ -65,10 +65,10 @@ ## animateTransform动画 -在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。 +在Svg的子组件[animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。 -``` +```html
@@ -94,7 +94,7 @@ ``` -``` +```css /* xxx.css */ .container { flex-direction: column; diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md index b8b2c2938cffdf4bd8c4b054bab49d28f0e0222e..f53badbbccf16f97d0d1f23b879d02e09af3576d 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-transform.md +++ b/zh-cn/application-dev/ui/ui-js-animate-transform.md @@ -7,7 +7,7 @@ 创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-830px)得到烟囱。 -``` +```html
@@ -22,7 +22,7 @@
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -38,8 +38,8 @@ height: 428px; background-color: #860303; transform: rotate(45deg); - margin-top: 230px; - margin-left: 266px; + margin-top: 284px; + margin-left: 148px; } .content{ margin-top: 500px; @@ -52,7 +52,7 @@ width: 100px; height: 150px; background-color: #1033d9; - transform: translate(150px,-150px); + transform: translate(150px,-137px); } .window{ z-index: 1; @@ -85,7 +85,7 @@ height: 100px; border-radius: 15px; background-color: #9a7404; - transform: translate(200px,-830px) skewX(-5deg); + transform: translate(200px,-710px) skewX(-5deg); } ``` @@ -96,7 +96,7 @@ 小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。 -``` +```html
@@ -104,7 +104,7 @@
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -175,7 +175,7 @@ 设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。 -``` +```html
@@ -194,7 +194,7 @@
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -252,13 +252,13 @@ .rect4{ width: 100px; height: 100px; - animation: rotate3d1 17ms infinite; + animation: rotate3d1 1000ms infinite; background: linear-gradient(#e6c4ec, #be15d9) } .rect5{ width: 100px; height: 100px; - animation: rotate3d1 17ms infinite; + animation: rotate3d1 1000ms infinite; margin-left: 100px; background: linear-gradient(#e6c4ec, #be15d9) } @@ -268,7 +268,7 @@ height: 100px; border-radius: 50px; border: 1px solid #e70303; - animation: rotate3d2 17ms infinite; + animation: rotate3d2 1000ms infinite; } /* 眼睛的动效 */ @keyframes rotate3d1{ @@ -311,7 +311,7 @@ 设置sacle3d中X轴、Y轴、Z轴的缩放参数实现动画。 -``` +```html
@@ -326,7 +326,7 @@
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -422,14 +422,14 @@ text{ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix(1,0,0,1,0,200)使组件移动和倾斜。 -``` +```html
``` -``` +```css /* xxx.css */ .container{ background-color:#F1F3F5; @@ -465,7 +465,7 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。 -``` +```html
@@ -476,7 +476,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
``` -``` +```css /* xxx.css */ .container{ flex-direction:column; diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md index d33fd6ddfcbd2773faa06aae992d18a817e605a9..117047f3ad403f0aae36778ba79fd9a6180fd90b 100644 --- a/zh-cn/application-dev/ui/ui-js-component-tabs.md +++ b/zh-cn/application-dev/ui/ui-js-component-tabs.md @@ -7,7 +7,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 在pages/index目录下的hml文件中创建一个Tabs组件。 -``` +```html
@@ -15,7 +15,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 item1 item2 - +
content1
@@ -27,7 +27,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -35,6 +35,10 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 align-items: center; background-color: #F1F3F5; } +.tabContent{ + width: 100%; + height: 100%; +} .text{ width: 100%; height: 100%; @@ -50,7 +54,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 Tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。 -``` +```html
@@ -74,7 +78,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。 -``` +```html
@@ -100,7 +104,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ## 设置样式 设置Tabs背景色及边框和tab-content布局。 -``` +```html
@@ -120,7 +124,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -155,7 +159,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。 -``` +```html
@@ -175,7 +179,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
``` -``` +```js /* index.js */ import prompt from '@system.prompt'; export default { @@ -201,7 +205,7 @@ export default { 用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。 -``` +```html
@@ -229,7 +233,7 @@ export default {
``` -``` +```css /* xxx.css */ .container{ width: 100%; @@ -265,7 +269,7 @@ background-color:#F1F3F5; } ``` -``` +```js /* index.js */ import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/ui/ui-js-components-button.md b/zh-cn/application-dev/ui/ui-js-components-button.md index a584bb53b9abec2c85dc072a9ecd9e0ee975989c..4dcd71f73504dadf8b8a1d6d2e9e0e1df659e780 100644 --- a/zh-cn/application-dev/ui/ui-js-components-button.md +++ b/zh-cn/application-dev/ui/ui-js-components-button.md @@ -74,7 +74,7 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> - Button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)。 +> - Button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../security/accesstoken-guidelines.md)。 如果需要添加ohos.permission.INTERNET权限，则在resources文件夹下的config.json文件里进行权限配置。 diff --git a/zh-cn/application-dev/ui/ui-js-components-canvas.md b/zh-cn/application-dev/ui/ui-js-components-canvas.md index f1a8b53d973de475c7a9a72b7b1eb921a44cef87..e37d327d1e76afde3f88d645964acd2db6355590 100644 --- a/zh-cn/application-dev/ui/ui-js-components-canvas.md +++ b/zh-cn/application-dev/ui/ui-js-components-canvas.md @@ -9,7 +9,7 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C 在pages/index目录下的hml文件中创建一个Canvas组件。 -``` +```html
@@ -17,9 +17,11 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C ``` -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -43,7 +45,7 @@ canvas{ Canvas组件设置宽（width）、高（height）、背景色（background-color）及边框样式（border）。 -``` +```html
@@ -51,9 +53,11 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo ``` -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -75,7 +79,7 @@ canvas{ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。 -``` +```html
@@ -85,7 +89,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU ``` -``` +```css /* xxx.css */ .container{ width:100%; @@ -112,7 +116,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md index 3865c41f1e740d805909dee85c0d5b0d62ea8c53..e73eed7f107fb318ab1c0afdf48c8fc7b81e6910 100644 --- a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md @@ -9,7 +9,7 @@ 使用moveTo和lineTo画出一条线段，当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo（二次贝赛尔曲线）或bezierCurveTo（三次贝赛尔曲线）的值组成图形。 -``` +```html
@@ -24,9 +24,11 @@ ``` -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -47,7 +49,7 @@ select{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -209,7 +211,7 @@ export default { -``` +```html
@@ -222,11 +224,11 @@ export default {
``` - - -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -246,9 +248,7 @@ select{ } ``` - - -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -307,7 +307,7 @@ export default { 添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。 -``` +```html
@@ -321,9 +321,11 @@ export default { ``` -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -344,7 +346,7 @@ select{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -432,7 +434,7 @@ export default { 先创建文本，再用fillText方法把文字写在画布上。通过globalAlpha属性改变基线透明度，使基线不会挡住文字，再设置textAlign和textBaseline属性确定文字基于基线的位置。 -``` +```html
@@ -445,9 +447,11 @@ export default { ``` -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -468,7 +472,7 @@ select{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -566,7 +570,7 @@ export default { 创建图片对象后使用drawImage属性画出图片，给图片设置一些动画样式如scale（缩放）、translate（平移）或rotate（旋转）。 -``` +```html
@@ -588,7 +592,7 @@ export default { ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -623,7 +627,7 @@ text{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -742,7 +746,7 @@ export default { save方法可对画笔样式进行存储，restore可对存储的画笔进行恢复。如下面的示例，先设置画笔为红色，在保存画笔后对画布进行清除并改变画笔为蓝色，当我们直接使用画笔时会画出一个蓝色矩形，对存储的画笔进行恢复后就可画出红色矩形。 -``` +```html
@@ -757,9 +761,11 @@ save方法可对画笔样式进行存储，restore可对存储的画笔进行恢 ``` -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; background-color: #F1F3F5; align-items: center; @@ -791,7 +797,7 @@ text{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/ui/ui-js-components-form.md b/zh-cn/application-dev/ui/ui-js-components-form.md index c14e9d2df6c3aeadd5fbb8b9cafcf02be43ece33..fad8a70d2a71e87559cf42b1885aec356b9848a6 100644 --- a/zh-cn/application-dev/ui/ui-js-components-form.md +++ b/zh-cn/application-dev/ui/ui-js-components-form.md @@ -10,7 +10,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ## 创建Form组件 在pages/index目录下的hml文件中创建一个Form组件。 -``` +```html
@@ -19,7 +19,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
``` -``` +```css /* xxx.css */ .container { width:100%; @@ -37,7 +37,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ## 实现表单缩放 为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../reference/arkui-js/js-components-common-attributes.md)。 -``` +```html
@@ -53,7 +53,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp 通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。 -``` +```css /* xxx.css */ .container { width: 100%; @@ -79,7 +79,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp 为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。 -``` +```html
@@ -98,7 +98,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
``` -``` +```css /* index.css */ .container{ width: 100%; @@ -118,7 +118,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp } ``` -``` +```js /* xxx.js */ import prompt from '@system.prompt'; export default{ @@ -145,7 +145,7 @@ export default{ 创建[Input](../reference/arkui-js/js-components-basic-input.md)组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。 -``` +```html
@@ -180,9 +180,11 @@ export default{
``` -``` +```css /* index.css */ .container { + width: 100%; + height: 100%; flex-direction:column; align-items:center; background-color:#F1F3F5; @@ -197,7 +199,7 @@ label{ } ``` -``` +```js /* xxx.js */ import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/ui/ui-js-components-grid.md b/zh-cn/application-dev/ui/ui-js-components-grid.md index e622fc396f4628d149e97d27e020849c7a8524d7..afd87f80737c217ff5e1ba74dcfb706bae45d166 100644 --- a/zh-cn/application-dev/ui/ui-js-components-grid.md +++ b/zh-cn/application-dev/ui/ui-js-components-grid.md @@ -9,7 +9,7 @@ 在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。 -``` +```html
@@ -22,12 +22,13 @@ ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; background-color: #F1F3F5; width: 100%; + height: 100%; justify-content: center; align-items: center; } @@ -44,7 +45,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。 -``` +```html
@@ -148,12 +150,13 @@ export default { ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; background-color: #F1F3F5; width: 100%; + height: 100%; justify-content: center; align-items: center; } @@ -174,7 +177,7 @@ text{ 本场景中循环输出list中的内容，创建出网格布局。进行下拉操时触发refresh（刷新页面）方法，这时会向list数组中添加一条数据并设置setTimeout（延迟触发），达到刷新请求数据的效果。 -``` +```html
@@ -197,12 +200,13 @@ text{ ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; background-color: #F1F3F5; width: 100%; + height: 100%; } text{ color: #0a0aef; @@ -211,7 +215,7 @@ text{ ``` -``` +```js // index.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md b/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md index ac829edabd4609f862920a5004cd4dbf394f7109..af61baaf3bef5fa3e84fb261dfe6ffdf9eb7ee41 100644 --- a/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md +++ b/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md @@ -4,7 +4,7 @@ 以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。 -``` +```html
@@ -23,9 +23,11 @@
``` -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -45,7 +47,7 @@ select{ } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -89,7 +91,7 @@ export default { 使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。 -``` +```html
@@ -103,9 +105,11 @@ export default { ``` -``` +```css /* xxx.css */ .container{ + width: 100%; + height: 100%; flex-direction: column; justify-content: center; align-items: center; @@ -136,7 +140,7 @@ button{ ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/ui/ui-js-components-path2d.md b/zh-cn/application-dev/ui/ui-js-components-path2d.md index 2345c9123ba3a8e6a630ba11f8c5d1e11aa4f741..9c8dceb0583d195a691563de306d947b72b1b565 100644 --- a/zh-cn/application-dev/ui/ui-js-components-path2d.md +++ b/zh-cn/application-dev/ui/ui-js-components-path2d.md @@ -8,14 +8,14 @@ 创建Path2D，使用多条线段组合图形。 -``` +```html
``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -23,6 +23,7 @@ align-items: center; justify-content: center; width: 100%; + height: 100%; } canvas{ width: 600px; @@ -32,7 +33,7 @@ canvas{ } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { @@ -81,7 +82,7 @@ export default { 先使用createPath2D创建出路径对象，只对path1路径进行描边，所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中，再对path1对象进行描边（stroke）操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0)，图形变大并向左倾斜。 -``` +```html
@@ -93,7 +94,7 @@ export default { ``` -``` +```css /* xxx.css */ .container{ flex-direction: column; @@ -101,6 +102,7 @@ export default { align-items: center; justify-content: center; width: 100%; + height: 100%; } canvas{ width: 600px; @@ -128,7 +130,7 @@ text{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; diff --git a/zh-cn/application-dev/ui/ui-js-components-switch.md b/zh-cn/application-dev/ui/ui-js-components-switch.md index db7de720074c4d18f4277ef7619014dcc3b5e157..b4b3770c5ef24a4165513fba507b8048d1fe5315 100644 --- a/zh-cn/application-dev/ui/ui-js-components-switch.md +++ b/zh-cn/application-dev/ui/ui-js-components-switch.md @@ -9,19 +9,17 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S 在pages/index目录下的hml文件中创建一个Switch组件。 -``` +```html
``` -``` +```css /* xxx.css */ .container { flex-direction: column; - justify-content: center; - align-items: center; background-color: #F1F3F5; } ``` @@ -33,7 +31,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。 -``` +```html
@@ -60,7 +58,7 @@ switch{ ``` -``` +```css // xxx.js import prompt from '@system.prompt'; export default { @@ -92,7 +90,7 @@ export default { 实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。 -``` +```html
@@ -111,7 +109,7 @@ export default { ``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -166,7 +164,7 @@ switch{ ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/website.md b/zh-cn/application-dev/website.md index 501d53db5e072cf594bccd0d6e17b90d761e3d9d..98a79c1b5451f8f0e77506443bdd802bc034f4fa 100644 --- a/zh-cn/application-dev/website.md +++ b/zh-cn/application-dev/website.md @@ -1,7 +1,7 @@ # OpenHarmony应用开发文档 - [应用开发导读](application-dev-guide.md) -- 快速开始 +- 入门 - 快速入门 - [开发准备](quick-start/start-overview.md) - [使用eTS语言开发（传统代码方式）](quick-start/start-with-ets.md) @@ -540,7 +540,6 @@ - JS服务卡片UI组件参考 - JS服务卡片UI框架说明 - [文件组织](reference/js-service-widget-ui/js-service-widget-file.md) - - [配置文件](reference/js-service-widget-ui/js-service-widget-config-file.md) - 语法 - [HML语法参考](reference/js-service-widget-ui/js-service-widget-syntax-hml.md) - [CSS语法参考](reference/js-service-widget-ui/js-service-widget-syntax-css.md)