Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 62e0baeb 编写于 作者: E ester.zhou 提交者： Gitee
浏览文件
操作

Merge branch 'OpenHarmony-3.1-Release' of gitee.com:openharmony/docs into C1-1108 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 e9667b92 fa155e13
隐藏空白更改
内联 并排
Showing with 3431 addition and 2896 deletion
en/application-dev/ability/fa-dataability.md
浏览文件 @ 62e0baeb
...@@ -6,25 +6,24 @@ A Data ability helps applications manage access to data stored by themselves and ...@@ -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. 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 ## Available APIs
**Table 1** Data ability lifecycle APIs **Table 1** Data ability lifecycle APIs
|API|Description| |API|Description|
|:------|:------| |:------|:------|
|onInitialized?(info: AbilityInfo): void|Called during ability initialization to initialize the relational database (RDB).| |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\<number>): void|Updates data in the database.| |update(uri: string, valueBucket: rdb.ValuesBucket, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<number>): void|Updates data in the database.|
|query?(uri: string, columns: Array\<string>, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<ResultSet>): void|Queries data in the database.| |query(uri: string, columns: Array\<string>, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<ResultSet>): void|Queries data in the database.|
|delete?(uri: string, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<number>): void|Deletes one or more data records from the database.| |delete(uri: string, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\<number>): void|Deletes one or more data records from the database.|
|normalizeUri?(uri: string, callback: AsyncCallback\<string>): 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.| |normalizeUri(uri: string, callback: AsyncCallback\<string>): 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\<rdb.ValuesBucket>, callback: AsyncCallback\<number>): void|Inserts multiple data records into the database.| |batchInsert(uri: string, valueBuckets: Array\<rdb.ValuesBucket>, callback: AsyncCallback\<number>): void|Inserts multiple data records into the database.|
|denormalizeUri?(uri: string, callback: AsyncCallback\<string>): void|Converts a normalized URI generated by **normalizeUri** into a denormalized URI.| |denormalizeUri(uri: string, callback: AsyncCallback\<string>): void|Converts a normalized URI generated by **normalizeUri** into a denormalized URI.|
|insert?(uri: string, valueBucket: rdb.ValuesBucket, callback: AsyncCallback\<number>): void|Inserts a data record into the database.| |insert(uri: string, valueBucket: rdb.ValuesBucket, callback: AsyncCallback\<number>): void|Inserts a data record into the database.|
|openFile?(uri: string, mode: string, callback: AsyncCallback\<number>): void|Opens a file.| |openFile(uri: string, mode: string, callback: AsyncCallback\<number>): void|Opens a file.|
|getFileTypes?(uri: string, mimeTypeFilter: string, callback: AsyncCallback<Array\<string>>): void|Obtains the MIME type of a file.| |getFileTypes(uri: string, mimeTypeFilter: string, callback: AsyncCallback<Array\<string>>): void|Obtains the MIME type of a file.|
|getType?(uri: string, callback: AsyncCallback\<string>): void|Obtains the MIME type matching the data specified by the URI.| |getType(uri: string, callback: AsyncCallback\<string>): void|Obtains the MIME type matching the data specified by the URI.|
|executeBatch?(ops: Array\<DataAbilityOperation>, callback: AsyncCallback\<Array\<DataAbilityResult>>): void|Operates data in the database in batches.| |executeBatch(ops: Array\<DataAbilityOperation>, callback: AsyncCallback\<Array\<DataAbilityResult>>): void|Operates data in the database in batches.|
|call?(method: string, arg: string, extras: PacMap, callback: AsyncCallback\<PacMap>): void|Calls a custom API.| |call(method: string, arg: string, extras: PacMap, callback: AsyncCallback\<PacMap>): void|Calls a custom API.|
## How to Develop ## How to Develop
...@@ -35,6 +34,7 @@ Data ability providers can customize data access-related APIs such as data inser ...@@ -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: The following code snippet shows how to create a Data ability:
```javascript ```javascript
import featureAbility from '@ohos.ability.featureAbility'
import dataAbility from '@ohos.data.dataAbility' import dataAbility from '@ohos.data.dataAbility'
import dataRdb from '@ohos.data.rdb' import dataRdb from '@ohos.data.rdb'
...@@ -46,7 +46,8 @@ Data ability providers can customize data access-related APIs such as data inser ...@@ -46,7 +46,8 @@ Data ability providers can customize data access-related APIs such as data inser
export default { export default {
onInitialized(abilityInfo) { onInitialized(abilityInfo) {
console.info('DataAbility onInitialized, abilityInfo:' + abilityInfo.bundleName) 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') console.info('DataAbility getRdbStore callback')
store.executeSql(SQL_CREATE_TABLE, []) store.executeSql(SQL_CREATE_TABLE, [])
rdbStore = store rdbStore = store
......
en/application-dev/ability/fa-formability.md
浏览文件 @ 62e0baeb
...@@ -157,8 +157,8 @@ Configure the **config.json** file for the widget. ...@@ -157,8 +157,8 @@ Configure the **config.json** file for the widget.
| supportDimensions | Grid styles supported by the widget. Available values are as follows:<br>**1 * 2**: indicates a grid with one row and two columns.<br>**2 * 2**: indicates a grid with two rows and two columns.<br>**2 * 4**: indicates a grid with two rows and four columns.<br>**4 * 4**: indicates a grid with four rows and four columns.| String array| No | | supportDimensions | Grid styles supported by the widget. Available values are as follows:<br>**1 * 2**: indicates a grid with one row and two columns.<br>**2 * 2**: indicates a grid with two rows and two columns.<br>**2 * 4**: indicates a grid with two rows and four columns.<br>**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 | | 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:<br>**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.<br>**false**: The widget cannot be updated periodically.| Boolean | No | | updateEnabled | Whether the widget can be updated periodically. Available values are as follows:<br>**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.<br>**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**) | | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute.<br>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.<br>If the value is **0**, this field does not take effect.<br>If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.| Number | Yes (initial value: **0**) | | updateDuration | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.<br>If the value is **0**, this field does not take effect.<br>If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.<br>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) | | 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) | | 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 | | 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. ...@@ -189,7 +189,6 @@ Configure the **config.json** file for the widget.
"scheduledUpdateTime": "10:30", "scheduledUpdateTime": "10:30",
"supportDimensions": ["2*2"], "supportDimensions": ["2*2"],
"type": "JS", "type": "JS",
"updateDuration": 1,
"updateEnabled": true "updateEnabled": true
}] }]
}] }]
...@@ -208,7 +207,7 @@ Mostly, the widget provider is started only when it needs to obtain information ...@@ -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 formName = want.parameters["ohos.extra.param.key.form_name"];
let tempFlag = want.parameters["ohos.extra.param.key.form_temporary"]; let tempFlag = want.parameters["ohos.extra.param.key.form_temporary"];
// Persistently store widget information for subsequent use, such as widget instance retrieval or update. // 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); storeFormInfo(formId, formName, tempFlag, want);
let obj = { let obj = {
...@@ -227,7 +226,7 @@ You should override **onDestroy** to delete widget data. ...@@ -227,7 +226,7 @@ You should override **onDestroy** to delete widget data.
console.log('FormAbility onDestroy'); console.log('FormAbility onDestroy');
// You need to implement the code for deleting the persistent widget instance. // 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); deleteFormInfo(formId);
} }
``` ```
...@@ -336,7 +335,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme ...@@ -336,7 +335,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme
"actions": { "actions": {
"routerEvent": { "routerEvent": {
"action": "router", "action": "router",
"abilityName": "com.example.MyApplication.hmservice.FormAbility", "abilityName": "com.example.entry.MainAbility",
"params": { "params": {
"message": "add detail" "message": "add detail"
} }
...@@ -348,3 +347,58 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme ...@@ -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. Now you've got a widget shown below.
![fa-form-example](figures/fa-form-example.png) ![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
<div class="container">
<stack>
<div class="container-img">
<image src="/common/widget.png" class="bg-img"></image>
</div>
<div class="container-inner">
<text class="title" onclick="routerEvent">{{title}}</text>
<text class="detail_text" onclick="messageEvent">{{detail}}</text>
</div>
</stack>
</div>
```
- 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
en/application-dev/ability/stage-formextension.md
浏览文件 @ 62e0baeb
...@@ -49,10 +49,10 @@ The **FormExtension** class also has a member context, that is, the **FormExtens ...@@ -49,10 +49,10 @@ The **FormExtension** class also has a member context, that is, the **FormExtens
**Table 2** FormExtensionContext APIs **Table 2** FormExtensionContext APIs
| API | Description | | API | Description |
| :----------------------------------------------------------- | :------------------------ | | :----------------------------------------------------------- | :----------------------------------------------------------- |
| updateForm(formId: string, formBindingData: formBindingData.FormBindingData, callback: AsyncCallback\<void>): void | Updates a widget. This API uses an asynchronous callback to return the result. | | updateForm(formId: string, formBindingData: formBindingData.FormBindingData, callback: AsyncCallback\<void>): void | Updates a widget. This API uses an asynchronous callback to return the result.|
| updateForm(formId: string, formBindingData: formBindingData.FormBindingData): Promise\<void> | Updates a widget. This API uses a promise to return the result.| | updateForm(formId: string, formBindingData: formBindingData.FormBindingData): Promise\<void> | 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). 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 ...@@ -86,7 +86,7 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo
export default class FormAbility extends FormExtension { export default class FormAbility extends FormExtension {
onCreate(want) { onCreate(want) {
console.log('FormAbility onCreate'); 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 = { let obj = {
"title": "titleOnCreate", "title": "titleOnCreate",
"detail": "detailOnCreate" "detail": "detailOnCreate"
...@@ -176,8 +176,8 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo ...@@ -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:<br>**1 * 2**: indicates a grid with one row and two columns.<br>**2 * 2**: indicates a grid with two rows and two columns.<br>**2 * 4**: indicates a grid with two rows and four columns.<br>**4 * 4**: indicates a grid with four rows and four columns.| String array| No | | supportDimensions | Grid styles supported by the widget. Available values are as follows:<br>**1 * 2**: indicates a grid with one row and two columns.<br>**2 * 2**: indicates a grid with two rows and two columns.<br>**2 * 4**: indicates a grid with two rows and four columns.<br>**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 | | 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:<br>**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.<br>**false**: The widget cannot be updated periodically.| Boolean | No | | updateEnabled | Whether the widget can be updated periodically. Available values are as follows:<br>**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.<br>**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**) | | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute.<br>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.<br>If the value is **0**, this field does not take effect.<br>If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.| Number | Yes (initial value: **0**) | | updateDuration | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.<br>If the value is **0**, this field does not take effect.<br>If the value is a positive integer ***N***, the interval is calculated by multiplying ***N*** and 30 minutes.<br>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) | | 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) | | 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) | | 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 ...@@ -200,7 +200,6 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo
"defaultDimension": "2*2", "defaultDimension": "2*2",
"updateEnabled": true, "updateEnabled": true,
"scheduledUpdateTime": "10:30", "scheduledUpdateTime": "10:30",
"updateDuration": 1,
"formConfigAbility": "ability://ohos.samples.FormApplication.MainAbility" "formConfigAbility": "ability://ohos.samples.FormApplication.MainAbility"
}] }]
} }
...@@ -218,8 +217,8 @@ Mostly, the widget provider is started only when it needs to obtain information ...@@ -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 formId = want.parameters["ohos.extra.param.key.form_identity"];
let formName = want.parameters["ohos.extra.param.key.form_name"]; let formName = want.parameters["ohos.extra.param.key.form_name"];
let tempFlag = want.parameters["ohos.extra.param.key.form_temporary"]; let tempFlag = want.parameters["ohos.extra.param.key.form_temporary"];
// Persistently store widget data for subsequent use, such as widget instance retrieval and update. // Persistently store widget data for subsequent use, such as widget instance retrieval or update.
// The storeFormInfo API is not implemented here. For details about the implementation, see "Samples" below. // The storeFormInfo API is not implemented here.
storeFormInfo(formId, formName, tempFlag, want); storeFormInfo(formId, formName, tempFlag, want);
let obj = { let obj = {
...@@ -238,7 +237,7 @@ You should override **onDestroy** to delete widget data. ...@@ -238,7 +237,7 @@ You should override **onDestroy** to delete widget data.
console.log('FormAbility onDestroy'); console.log('FormAbility onDestroy');
// You need to implement the code for deleting the persistent widget data. // 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); deleteFormInfo(formId);
} }
``` ```
...@@ -277,10 +276,11 @@ onUpdate(formId) { ...@@ -277,10 +276,11 @@ onUpdate(formId) {
You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programmed widget. 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. > Currently, only the JavaScript-based web-like development paradigm can be used to develop the widget UI.
- hml: - In the HML file:
```html ```html
<div class="container"> <div class="container">
<stack> <stack>
...@@ -295,7 +295,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme ...@@ -295,7 +295,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme
</div> </div>
``` ```
- css: - In the CSS file:
```css ```css
.container { .container {
...@@ -336,7 +336,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme ...@@ -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 ```json
{ {
"data": { "data": {
...@@ -346,7 +346,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme ...@@ -346,7 +346,7 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme
"actions": { "actions": {
"routerEvent": { "routerEvent": {
"action": "router", "action": "router",
"abilityName": "com.example.MyApplication.hmservice.FormAbility", "abilityName": "MainAbility",
"params": { "params": {
"message": "add detail" "message": "add detail"
} }
...@@ -358,3 +358,58 @@ You can use HML, CSS, and JSON to develop the UI page for a JavaScript-programme ...@@ -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. Now you've got a widget shown below.
![fa-form-example](figures/fa-form-example.png) ![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
<div class="container">
<stack>
<div class="container-img">
<image src="/common/widget.png" class="bg-img"></image>
</div>
<div class="container-inner">
<text class="title" onclick="routerEvent">{{title}}</text>
<text class="detail_text" onclick="messageEvent">{{detail}}</text>
</div>
</stack>
</div>
```
- 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
en/application-dev/reference/apis/js-apis-data-storage.md
浏览文件 @ 62e0baeb
...@@ -3,13 +3,10 @@ ...@@ -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. 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**<br/> > **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 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.
## Modules to Import ## Modules to Import
......
en/application-dev/reference/apis/js-apis-i18n.md
浏览文件 @ 62e0baeb
...@@ -2,10 +2,10 @@ ...@@ -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. 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** > **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 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. ...@@ -26,16 +26,16 @@ Obtains the localized script for the specified language.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------------ | ------- | ---- | ---------------- | | ------------ | ------- | --------- | ---------------------------------------- |
| language | string | Yes | Specified language. | | language | string | Yes | Specified language. |
| locale | string | Yes | Locale ID. | | locale | string | Yes | Locale ID. |
| sentenceCase | boolean | No | Whether to use sentence case for the localized script.| | sentenceCase | boolean | No | Whether to use sentence case for the localized script. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------------- | | ------ | ---------------------------------------- |
| string | Localized script for the specified language.| | string | Localized script for the specified language. |
**Example** **Example**
``` ```
...@@ -53,16 +53,16 @@ Obtains the localized script for the specified country. ...@@ -53,16 +53,16 @@ Obtains the localized script for the specified country.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------------ | ------- | ---- | ----------------------------- | | ------------ | ------- | --------- | ---------------------------------------- |
| country | string | Yes | Specified country. | | country | string | Yes | Specified country. |
| locale | string | Yes | Locale ID. | | locale | string | Yes | Locale ID. |
| sentenceCase | boolean | No | Whether to use sentence case for the localized script.| | sentenceCase | boolean | No | Whether to use sentence case for the localized script. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------------------------------------------ | | ------ | ---------------------------------------- |
| string | Localized script for the specified country.| | string | Localized script for the specified country. |
**Example** **Example**
``` ```
...@@ -85,9 +85,9 @@ Checks whether the localized script for the specified language is displayed from ...@@ -85,9 +85,9 @@ Checks whether the localized script for the specified language is displayed from
| locale | string | Locale ID. | | locale | string | Locale ID. |
**Return Value** **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** **Example**
``` ```
...@@ -105,9 +105,9 @@ Obtains the system language. ...@@ -105,9 +105,9 @@ Obtains the system language.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------- | | ------ | ------------------- |
| string | System language ID.| | string | System language ID. |
**Example** **Example**
``` ```
...@@ -130,14 +130,14 @@ Sets the system language. Currently, this API does not support real-time updatin ...@@ -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. **System API**: This is a system API and cannot be called by third-party applications.
**Parameters** **Parameters**
| Name | Type | Description | | Name | Type | Description |
| -------- | ------ | ----- | | -------- | ------ | ------------ |
| language | string | Language ID.| | language | string | Language ID. |
**Return Value** **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** **Example**
``` ```
...@@ -156,9 +156,9 @@ Obtains the list of system languages. ...@@ -156,9 +156,9 @@ Obtains the list of system languages.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------------------- | ------------ | | ------------------- | ------------------------------------ |
| Array&lt;string&gt; | List of the IDs of system languages.| | Array&lt;string&gt; | List of the IDs of system languages. |
**Example** **Example**
``` ```
...@@ -177,14 +177,14 @@ Obtains the list of countries and regions supported for the specified language. ...@@ -177,14 +177,14 @@ Obtains the list of countries and regions supported for the specified language.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Description | | Name | Type | Description |
| -------- | ------ | ----- | | -------- | ------ | ------------ |
| language | string | Language ID.| | language | string | Language ID. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------------------- | ------------ | | ------------------- | ---------------------------------------- |
| Array&lt;string&gt; | List of the IDs of the countries and regions supported for the specified language.| | Array&lt;string&gt; | List of the IDs of the countries and regions supported for the specified language. |
**Example** **Example**
``` ```
...@@ -201,9 +201,9 @@ Obtains the system region. ...@@ -201,9 +201,9 @@ Obtains the system region.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------- | | ------ | ----------------- |
| string | System region ID.| | string | System region ID. |
**Example** **Example**
``` ```
...@@ -224,14 +224,14 @@ Sets the system region. ...@@ -224,14 +224,14 @@ Sets the system region.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ------ | ------ | ----- | | ------ | ------ | ----------- |
| region | string | Region ID.| | region | string | Region ID. |
**Return Value** **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** **Example**
``` ```
...@@ -248,9 +248,9 @@ Obtains the system locale. ...@@ -248,9 +248,9 @@ Obtains the system locale.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------- | | ------ | ----------------- |
| string | System locale ID.| | string | System locale ID. |
**Example** **Example**
``` ```
...@@ -271,14 +271,14 @@ Sets the system locale. ...@@ -271,14 +271,14 @@ Sets the system locale.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ------ | ------ | --------------- | | ------ | ------ | ---------------------------------------- |
| locale | string | System locale ID, for example, **zh-CN**.| | locale | string | System locale ID, for example, **zh-CN**. |
**Return Value** **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** **Example**
``` ```
...@@ -297,15 +297,15 @@ Checks whether the system language matches the specified region. ...@@ -297,15 +297,15 @@ Checks whether the system language matches the specified region.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ------ | ---- | ------------- | | -------- | ------ | --------- | --------------------------------------- |
| language | string | Yes | Valid language ID, for example, **zh**.| | language | string | Yes | Valid language ID, for example, **zh**. |
| region | string | No | Valid region ID, for example, **CN**. | | region | string | No | Valid region ID, for example, **CN**. |
**Return Value** **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** **Example**
``` ```
...@@ -322,15 +322,15 @@ Obtains a **Calendar** object. ...@@ -322,15 +322,15 @@ Obtains a **Calendar** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ---------------------------------------- | | ------ | ------ | --------- | ---------------------------------------- |
| locale | string | Yes | Valid locale value, for example, **zh-Hans-CN**. | | 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.| | 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** **Return Value**
| Type | Description | | Type | Description |
| ---------------------- | ----- | | ---------------------- | -------------------- |
| [Calendar](#calendar8) | **Calendar** object.| | [Calendar](#calendar8) | **Calendar** object. |
**Example** **Example**
``` ```
...@@ -350,9 +350,9 @@ Sets the date for this **Calendar** object. ...@@ -350,9 +350,9 @@ Sets the date for this **Calendar** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ---- | ---- | ----------------- | | ---- | ---- | --------- | ---------------------------------------- |
| date | Date | Yes | Date to be set for the **Calendar** object.| | date | Date | Yes | Date to be set for the **Calendar** object. |
**Example** **Example**
``` ```
...@@ -371,9 +371,9 @@ Sets the date and time for this **Calendar** object. The value is represented by ...@@ -371,9 +371,9 @@ Sets the date and time for this **Calendar** object. The value is represented by
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | --------- | ---------------------------------------- |
| time | number | Yes | Number of milliseconds that have elapsed since the Unix epoch.| | time | number | Yes | Number of milliseconds that have elapsed since the Unix epoch. |
**Example** **Example**
``` ```
...@@ -391,14 +391,14 @@ Sets the year, month, day, hour, minute, and second for this **Calendar** object ...@@ -391,14 +391,14 @@ Sets the year, month, day, hour, minute, and second for this **Calendar** object
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ------ | | ------ | ------ | --------- | -------------- |
| year | number | Yes | Year to set. | | year | number | Yes | Year to set. |
| month | number | Yes | Month to set. | | month | number | Yes | Month to set. |
| date | number | Yes | Day to set. | | date | number | Yes | Day to set. |
| hour | number | No | Hour to set.| | hour | number | No | Hour to set. |
| minute | number | No | Minute to set.| | minute | number | No | Minute to set. |
| second | number | No | Second to set. | | second | number | No | Second to set. |
**Example** **Example**
``` ```
...@@ -416,9 +416,9 @@ Sets the time zone of this **Calendar** object. ...@@ -416,9 +416,9 @@ Sets the time zone of this **Calendar** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ------ | ---- | ------------------------- | | -------- | ------ | --------- | ---------------------------------------- |
| timezone | string | Yes | Time zone, for example, **Asia/Shanghai**.| | timezone | string | Yes | Time zone, for example, **Asia/Shanghai**. |
**Example** **Example**
``` ```
...@@ -436,9 +436,9 @@ Obtains the time zone of this **Calendar** object. ...@@ -436,9 +436,9 @@ Obtains the time zone of this **Calendar** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ---------- | | ------ | ------------------------------------- |
| string | Time zone of the **Calendar** object.| | string | Time zone of the **Calendar** object. |
**Example** **Example**
``` ```
...@@ -457,9 +457,9 @@ Obtains the start day of a week for this **Calendar** object. ...@@ -457,9 +457,9 @@ Obtains the start day of a week for this **Calendar** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | --------------------- | | ------ | ---------------------------------------- |
| number | Start day of a week. The value **1** indicates Sunday, and the value **7** indicates Saturday.| | number | Start day of a week. The value **1** indicates Sunday, and the value **7** indicates Saturday. |
**Example** **Example**
``` ```
...@@ -477,9 +477,9 @@ Sets the start day of a week for this **Calendar** object. ...@@ -477,9 +477,9 @@ Sets the start day of a week for this **Calendar** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | --------------------- | | ----- | ------ | --------- | ---------------------------------------- |
| value | number | No | Start day of a week. The value **1** indicates Sunday, and the value **7** indicates Saturday.| | value | number | No | Start day of a week. The value **1** indicates Sunday, and the value **7** indicates Saturday. |
**Example** **Example**
``` ```
...@@ -497,9 +497,9 @@ Obtains the minimum number of days in the first week of a year. ...@@ -497,9 +497,9 @@ Obtains the minimum number of days in the first week of a year.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------------ | | ------ | ---------------------------------------- |
| number | Minimum number of days in the first week of a year.| | number | Minimum number of days in the first week of a year. |
**Example** **Example**
``` ```
...@@ -517,9 +517,9 @@ Sets the minimum number of days in the first week of a year. ...@@ -517,9 +517,9 @@ Sets the minimum number of days in the first week of a year.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ------------ | | ----- | ------ | --------- | ---------------------------------------- |
| value | number | No | Minimum number of days in the first week of a year.| | value | number | No | Minimum number of days in the first week of a year. |
**Example** **Example**
``` ```
...@@ -537,14 +537,14 @@ Obtains the value of the specified field in the **Calendar** object. ...@@ -537,14 +537,14 @@ Obtains the value of the specified field in the **Calendar** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | 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**.| | 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** **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** **Example**
``` ```
...@@ -563,14 +563,14 @@ Obtains the name of the **Calendar** object displayed for the specified locale. ...@@ -563,14 +563,14 @@ Obtains the name of the **Calendar** object displayed for the specified locale.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | 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**.| | 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** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------------------- | | ------ | ---------------------------------------- |
| string | Name of the **Calendar** object displayed for the specified locale.| | string | Name of the **Calendar** object displayed for the specified locale. |
**Example** **Example**
``` ```
...@@ -588,14 +588,14 @@ Checks whether the specified date in this **Calendar** object is a weekend. ...@@ -588,14 +588,14 @@ Checks whether the specified date in this **Calendar** object is a weekend.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | 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.| | 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** **Return Value**
| Type | Description | | Type | Description |
| ------- | ----------------------------------- | | ------- | ---------------------------------------- |
| boolean | Returns **true** if the date is a weekend; returns **false** if the date is a weekday.| | boolean | Returns **true** if the date is a weekend; returns **false** if the date is a weekday. |
**Example** **Example**
``` ```
...@@ -619,10 +619,10 @@ Creates a **PhoneNumberFormat** object. ...@@ -619,10 +619,10 @@ Creates a **PhoneNumberFormat** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
Parameters Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ---------------------------------------- | ---- | ---------------- | | ------- | ---------------------------------------- | --------- | ---------------------------------------- |
| country | string | Yes | Country or region to which the phone number to be formatted belongs.| | country | string | Yes | Country or region to which the phone number to be formatted belongs. |
| options | [PhoneNumberFormatOptions](#phonenumberformatoptions8) | No | Options of the **PhoneNumberFormat** object. | | options | [PhoneNumberFormatOptions](#phonenumberformatoptions8) | No | Options of the **PhoneNumberFormat** object. |
**Example** **Example**
``` ```
...@@ -639,14 +639,14 @@ Checks whether the format of the specified phone number is valid. ...@@ -639,14 +639,14 @@ Checks whether the format of the specified phone number is valid.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | --------- | | ------ | ------ | --------- | --------------------------- |
| number | string | Yes | Phone number to be checked.| | number | string | Yes | Phone number to be checked. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------- | ------------------------------------- | | ------- | ---------------------------------------- |
| boolean | Returns **true** if the phone number format is valid; returns **false** otherwise.| | boolean | Returns **true** if the phone number format is valid; returns **false** otherwise. |
**Example** **Example**
``` ```
...@@ -664,14 +664,14 @@ Formats a phone number. ...@@ -664,14 +664,14 @@ Formats a phone number.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ---------- | | ------ | ------ | --------- | ----------------------------- |
| number | string | Yes | Phone number to be formatted.| | number | string | Yes | Phone number to be formatted. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ---------- | | ------ | ----------------------- |
| string | Formatted phone number.| | string | Formatted phone number. |
**Example** **Example**
``` ```
...@@ -688,15 +688,15 @@ Obtains the home location of a phone number. ...@@ -688,15 +688,15 @@ Obtains the home location of a phone number.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ---------- | | ------ | ------ | --------- | ------------- |
| number | string | Yes | Phone number.| | number | string | Yes | Phone number. |
| locale | string | Yes | Locale ID.| | locale | string | Yes | Locale ID. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | ---------- | | ------ | ---------------------------------- |
| string | Home location of the phone number.| | string | Home location of the phone number. |
**Example** **Example**
```js ```js
...@@ -711,9 +711,9 @@ Defines the options for this PhoneNumberFormat object. ...@@ -711,9 +711,9 @@ Defines the options for this PhoneNumberFormat object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
| Name | Type | Readable | Writable | Description | | Name | Type | Readable | Writable | Description |
| ---- | ------ | ---- | ---- | ---------------------------------------- | | ---- | ------ | -------- | -------- | ---------------------------------------- |
| type | string | Yes | Yes | Format type of a phone number. The value can be **E164**, **INTERNATIONAL**, **NATIONAL**, or **RFC3966**.| | type | string | Yes | Yes | Format type of a phone number. The value can be **E164**, **INTERNATIONAL**, **NATIONAL**, or **RFC3966**. |
## UnitInfo<sup>8+</sup> ## UnitInfo<sup>8+</sup>
...@@ -722,10 +722,10 @@ Defines the measurement unit information. ...@@ -722,10 +722,10 @@ Defines the measurement unit information.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
| Name | Type | Readable | Writable | Description | | Name | Type | Readable | Writable | Description |
| ------------- | ------ | ---- | ---- | ---------------------------------------- | | ------------- | ------ | -------- | -------- | ---------------------------------------- |
| unit | string | Yes | Yes | Name of the measurement unit, for example, **meter**, **inch**, or **cup**.| | 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**.| | measureSystem | string | Yes | Yes | Measurement system. The value can be **SI**, **US**, or **UK**. |
## Util<sup>8+</sup> ## Util<sup>8+</sup>
...@@ -740,18 +740,18 @@ Converts one measurement unit into another and formats the unit based on the spe ...@@ -740,18 +740,18 @@ Converts one measurement unit into another and formats the unit based on the spe
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ---------------------- | ---- | ---------------------------------------- | | -------- | ---------------------- | --------- | ---------------------------------------- |
| fromUnit | [UnitInfo](#unitinfo8) | Yes | Measurement unit to be converted. | | fromUnit | [UnitInfo](#unitinfo8) | Yes | Measurement unit to be converted. |
| toUnit | [UnitInfo](#unitinfo8) | Yes | Measurement unit to be converted to. | | toUnit | [UnitInfo](#unitinfo8) | Yes | Measurement unit to be converted to. |
| value | number | Yes | Value of the measurement unit to be converted. | | value | number | Yes | Value of the measurement unit to be converted. |
| locale | string | Yes | Locale used for formatting, for example, **zh-Hans-CN**. | | 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**.| | style | string | No | Style used for formatting. The value can be **long**, **short**, or **medium**. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ----------------------- | | ------ | ---------------------------------------- |
| string | Character string obtained after formatting based on the measurement unit specified by **toUnit**.| | string | Character string obtained after formatting based on the measurement unit specified by **toUnit**. |
**Example** **Example**
``` ```
...@@ -767,14 +767,14 @@ Obtains the sequence of the year, month, and day in the specified locale. ...@@ -767,14 +767,14 @@ Obtains the sequence of the year, month, and day in the specified locale.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ---------------------- | ---- | ---------------------------------------- | | ------ | ------ | --------- | ---------------------------------------- |
| locale | string | Yes | Locale used for formatting, for example, **zh-Hans-CN**. | | locale | string | Yes | Locale used for formatting, for example, **zh-Hans-CN**. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | ----------------------- | | ------ | ------------------------------------- |
| string | Sequence of the year, month, and day.| | string | Sequence of the year, month, and day. |
**Example** **Example**
``` ```
...@@ -790,14 +790,14 @@ Creates an **IndexUtil** object. ...@@ -790,14 +790,14 @@ Creates an **IndexUtil** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ---------------------------- | | ------ | ------ | --------- | ---------------------------------------- |
| locale | string | No | A string containing locale information, including the language, optional script, and region.| | locale | string | No | A string containing locale information, including the language, optional script, and region. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------------------------ | --------------------- | | ------------------------ | ---------------------------------------- |
| [IndexUtil](#indexutil8) | **IndexUtil** object mapping to the specified locale.| | [IndexUtil](#indexutil8) | **IndexUtil** object mapping to the specified locale. |
**Example** **Example**
``` ```
...@@ -817,9 +817,9 @@ Obtains the index list for this **locale** object. ...@@ -817,9 +817,9 @@ Obtains the index list for this **locale** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------------------- | ------------------ | | ------------------- | -------------------------------------- |
| Array&lt;string&gt; | Index list for this **locale** object.| | Array&lt;string&gt; | Index list for this **locale** object. |
**Example** **Example**
``` ```
...@@ -837,9 +837,9 @@ Adds the index of the new **locale** object to the index list. ...@@ -837,9 +837,9 @@ Adds the index of the new **locale** object to the index list.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ---------------------------- | | ------ | ------ | --------- | ---------------------------------------- |
| locale | string | Yes | A string containing locale information, including the language, optional script, and region.| | locale | string | Yes | A string containing locale information, including the language, optional script, and region. |
**Example** **Example**
``` ```
...@@ -857,14 +857,14 @@ Obtains the index of a text object. ...@@ -857,14 +857,14 @@ Obtains the index of a text object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ------------ | | ---- | ------ | --------- | ---------------------------------------- |
| text | string | Yes | **text** object whose index is to be obtained.| | text | string | Yes | **text** object whose index is to be obtained. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ----------- | | ------ | ----------------------------- |
| string | Index of the **text** object.| | string | Index of the **text** object. |
**Example** **Example**
``` ```
...@@ -885,14 +885,14 @@ Checks whether the input character string is composed of digits. ...@@ -885,14 +885,14 @@ Checks whether the input character string is composed of digits.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- | | ---- | ------ | --------- | ---------------- |
| char | string | Yes | Input character.| | char | string | Yes | Input character. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------- | ------------------------------------ | | ------- | ---------------------------------------- |
| boolean | Returns **true** if the input character is a digit; returns **false** otherwise.| | boolean | Returns **true** if the input character is a digit; returns **false** otherwise. |
**Example** **Example**
``` ```
...@@ -909,14 +909,14 @@ Checks whether the input character is a space. ...@@ -909,14 +909,14 @@ Checks whether the input character is a space.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- | | ---- | ------ | --------- | ---------------- |
| char | string | Yes | Input character.| | char | string | Yes | Input character. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------- | -------------------------------------- | | ------- | ---------------------------------------- |
| boolean | Returns **true** if the input character is a space; returns **false** otherwise.| | boolean | Returns **true** if the input character is a space; returns **false** otherwise. |
**Example** **Example**
``` ```
...@@ -933,14 +933,14 @@ Checks whether the input character is a white space. ...@@ -933,14 +933,14 @@ Checks whether the input character is a white space.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- | | ---- | ------ | --------- | ---------------- |
| char | string | Yes | Input character.| | char | string | Yes | Input character. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------- | -------------------------------------- | | ------- | ---------------------------------------- |
| boolean | Returns **true** if the input character is a white space; returns **false** otherwise.| | boolean | Returns **true** if the input character is a white space; returns **false** otherwise. |
**Example** **Example**
``` ```
...@@ -957,14 +957,14 @@ Checks whether the input character is of the right to left (RTL) language. ...@@ -957,14 +957,14 @@ Checks whether the input character is of the right to left (RTL) language.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- | | ---- | ------ | --------- | ---------------- |
| char | string | Yes | Input character.| | char | string | Yes | Input character. |
**Return Value** **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** **Example**
``` ```
...@@ -981,14 +981,14 @@ Checks whether the input character is an ideographic character. ...@@ -981,14 +981,14 @@ Checks whether the input character is an ideographic character.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- | | ---- | ------ | --------- | ---------------- |
| char | string | Yes | Input character.| | char | string | Yes | Input character. |
**Return Value** **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** **Example**
``` ```
...@@ -1005,14 +1005,14 @@ Checks whether the input character is a letter. ...@@ -1005,14 +1005,14 @@ Checks whether the input character is a letter.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- | | ---- | ------ | --------- | ---------------- |
| char | string | Yes | Input character.| | char | string | Yes | Input character. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------- | ------------------------------------ | | ------- | ---------------------------------------- |
| boolean | Returns **true** if the input character is a letter; returns **false** otherwise.| | boolean | Returns **true** if the input character is a letter; returns **false** otherwise. |
**Example** **Example**
``` ```
...@@ -1029,14 +1029,14 @@ Checks whether the input character is a lowercase letter. ...@@ -1029,14 +1029,14 @@ Checks whether the input character is a lowercase letter.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- | | ---- | ------ | --------- | ---------------- |
| char | string | Yes | Input character.| | char | string | Yes | Input character. |
**Return Value** **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** **Example**
``` ```
...@@ -1053,14 +1053,14 @@ Checks whether the input character is an uppercase letter. ...@@ -1053,14 +1053,14 @@ Checks whether the input character is an uppercase letter.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- | | ---- | ------ | --------- | ---------------- |
| char | string | Yes | Input character.| | char | string | Yes | Input character. |
**Return Value** **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** **Example**
``` ```
...@@ -1077,14 +1077,14 @@ Obtains the type of the input character string. ...@@ -1077,14 +1077,14 @@ Obtains the type of the input character string.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----- | | ---- | ------ | --------- | ---------------- |
| char | string | Yes | Input character.| | char | string | Yes | Input character. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ----------- | | ------ | ---------------------------- |
| string | Type of the input character.| | string | Type of the input character. |
**Example** **Example**
``` ```
...@@ -1101,14 +1101,14 @@ Obtains a [BreakIterator](#breakiterator8) object for text segmentation. ...@@ -1101,14 +1101,14 @@ Obtains a [BreakIterator](#breakiterator8) object for text segmentation.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | 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.| | 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** **Return Value**
| Type | Description | | Type | Description |
| -------------------------------- | ----------- | | -------------------------------- | ---------------------------------------- |
| [BreakIterator](#breakiterator8) | [BreakIterator](#breakiterator8) object used for text segmentation.| | [BreakIterator](#breakiterator8) | [BreakIterator](#breakiterator8) object used for text segmentation. |
**Example** **Example**
``` ```
...@@ -1128,9 +1128,9 @@ Sets the text to be processed by the [BreakIterator](#breakiterator8) object. ...@@ -1128,9 +1128,9 @@ Sets the text to be processed by the [BreakIterator](#breakiterator8) object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ----------------------- | | ---- | ------ | --------- | ---------------------------------------- |
| text | string | Yes | Text to be processed by the **BreakIterator** object.| | text | string | Yes | Text to be processed by the **BreakIterator** object. |
**Example** **Example**
``` ```
...@@ -1148,9 +1148,9 @@ Obtains the text being processed by the [BreakIterator](#breakiterator8) object. ...@@ -1148,9 +1148,9 @@ Obtains the text being processed by the [BreakIterator](#breakiterator8) object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ---------------------- | | ------ | ---------------------------------------- |
| string | Text being processed by the **BreakIterator** object.| | string | Text being processed by the **BreakIterator** object. |
**Example** **Example**
``` ```
...@@ -1169,9 +1169,9 @@ Obtains the position of the [BreakIterator](#breakiterator8) object in the text ...@@ -1169,9 +1169,9 @@ Obtains the position of the [BreakIterator](#breakiterator8) object in the text
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | --------------------------- | | ------ | ---------------------------------------- |
| number | Position of the **BreakIterator** object in the text being processed.| | number | Position of the **BreakIterator** object in the text being processed. |
**Example** **Example**
``` ```
...@@ -1190,9 +1190,9 @@ Puts the [BreakIterator](#breakiterator8) object to the first text boundary, whi ...@@ -1190,9 +1190,9 @@ Puts the [BreakIterator](#breakiterator8) object to the first text boundary, whi
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ----------------- | | ------ | ---------------------------------------- |
| number | Offset to the first text boundary of the processed text.| | number | Offset to the first text boundary of the processed text. |
**Example** **Example**
``` ```
...@@ -1211,9 +1211,9 @@ Puts the [BreakIterator](#breakiterator8) object to the last text boundary, whic ...@@ -1211,9 +1211,9 @@ Puts the [BreakIterator](#breakiterator8) object to the last text boundary, whic
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------------------ | | ------ | ---------------------------------------- |
| number | Offset of the last text boundary of the processed text.| | number | Offset of the last text boundary of the processed text. |
**Example** **Example**
``` ```
...@@ -1232,14 +1232,14 @@ Moves the [BreakIterator](#breakiterator8) object backward by the specified numb ...@@ -1232,14 +1232,14 @@ Moves the [BreakIterator](#breakiterator8) object backward by the specified numb
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | 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**.| | 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** **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** **Example**
``` ```
...@@ -1260,9 +1260,9 @@ Moves the [BreakIterator](#breakiterator8) object to the previous text boundary. ...@@ -1260,9 +1260,9 @@ Moves the [BreakIterator](#breakiterator8) object to the previous text boundary.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **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** **Example**
``` ```
...@@ -1283,14 +1283,14 @@ Moves the [BreakIterator](#breakiterator8) object to the text boundary after the ...@@ -1283,14 +1283,14 @@ Moves the [BreakIterator](#breakiterator8) object to the text boundary after the
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ---------------------------------------- | | ------ | ------ | --------- | ---------------------------------------- |
| offset | number | Yes | Offset to the position before the text boundary to which the [BreakIterator](#breakiterator8) object is moved.| | offset | number | Yes | Offset to the position before the text boundary to which the [BreakIterator](#breakiterator8) object is moved. |
**Return Value** **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** **Example**
``` ```
...@@ -1311,14 +1311,14 @@ Checks whether the position specified by the offset is a text boundary. If **tru ...@@ -1311,14 +1311,14 @@ Checks whether the position specified by the offset is a text boundary. If **tru
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ----------- | | ------ | ------ | --------- | ------------------ |
| offset | number | Yes | Position to check.| | offset | number | Yes | Position to check. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------- | ------------------------------- | | ------- | ---------------------------------------- |
| boolean | Returns **true** if the position specified by the offset is a text boundary; returns **false** otherwise.| | boolean | Returns **true** if the position specified by the offset is a text boundary; returns **false** otherwise. |
**Example** **Example**
``` ```
...@@ -1338,9 +1338,9 @@ Checks whether the 24-hour clock is used. ...@@ -1338,9 +1338,9 @@ Checks whether the 24-hour clock is used.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **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** **Example**
``` ```
...@@ -1359,14 +1359,14 @@ Sets the 24-hour clock. ...@@ -1359,14 +1359,14 @@ Sets the 24-hour clock.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | 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.| | 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** **Return Value**
| Type | Description | | Type | Description |
| ------- | ----------------------------- | | ------- | ---------------------------------------- |
| boolean | Returns **true** if the 24-hour clock is enabled; returns **false** otherwise.| | boolean | Returns **true** if the 24-hour clock is enabled; returns **false** otherwise. |
**Example** **Example**
``` ```
...@@ -1386,15 +1386,15 @@ Adds a preferred language to the specified position on the preferred language li ...@@ -1386,15 +1386,15 @@ Adds a preferred language to the specified position on the preferred language li
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ------ | ---- | ---------- | | -------- | ------ | --------- | ---------------------------------------- |
| language | string | Yes | Preferred language to add. | | language | string | Yes | Preferred language to add. |
| index | number | No | Position to which the preferred language is added.| | index | number | No | Position to which the preferred language is added. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------- | ----------------------------- | | ------- | ---------------------------------------- |
| boolean | Returns **true** if the preferred language is successfully added; returns **false** otherwise.| | boolean | Returns **true** if the preferred language is successfully added; returns **false** otherwise. |
**Example** **Example**
``` ```
...@@ -1416,14 +1416,14 @@ Deletes a preferred language from the specified position on the preferred langua ...@@ -1416,14 +1416,14 @@ Deletes a preferred language from the specified position on the preferred langua
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | --------------------- | | ----- | ------ | --------- | ---------------------------------------- |
| index | number | Yes | Position of the preferred language to delete.| | index | number | Yes | Position of the preferred language to delete. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------- | ----------------------------- | | ------- | ---------------------------------------- |
| boolean | Returns **true** if the preferred language is deleted; returns **false** otherwise.| | boolean | Returns **true** if the preferred language is deleted; returns **false** otherwise. |
**Example** **Example**
``` ```
...@@ -1442,9 +1442,9 @@ Obtains the list of preferred languages. ...@@ -1442,9 +1442,9 @@ Obtains the list of preferred languages.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------------------- | --------- | | ------------------- | ---------------------------- |
| Array&lt;string&gt; | List of preferred languages.| | Array&lt;string&gt; | List of preferred languages. |
**Example** **Example**
``` ```
...@@ -1461,9 +1461,9 @@ Obtains the first language in the preferred language list. ...@@ -1461,9 +1461,9 @@ Obtains the first language in the preferred language list.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | -------------- | | ------ | ---------------------------------------- |
| string | First language in the preferred language list.| | string | First language in the preferred language list. |
**Example** **Example**
``` ```
...@@ -1480,14 +1480,14 @@ Obtains the **TimeZone** object corresponding to the specified time zone ID. ...@@ -1480,14 +1480,14 @@ Obtains the **TimeZone** object corresponding to the specified time zone ID.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ----- | | ------ | ------ | --------- | ------------- |
| zondID | string | No | Time zone ID.| | zondID | string | No | Time zone ID. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| -------- | ------------ | | -------- | ---------------------------------------- |
| TimeZone | **TimeZone** object corresponding to the time zone ID.| | TimeZone | **TimeZone** object corresponding to the time zone ID. |
**Example** **Example**
``` ```
...@@ -1507,9 +1507,9 @@ Obtains the ID of the specified **TimeZone** object. ...@@ -1507,9 +1507,9 @@ Obtains the ID of the specified **TimeZone** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------------ | | ------ | ---------------------------------------- |
| string | Time zone ID corresponding to the **TimeZone** object.| | string | Time zone ID corresponding to the **TimeZone** object. |
**Example** **Example**
``` ```
...@@ -1527,15 +1527,15 @@ Obtains the representation of a **TimeZone** object in the specified locale. ...@@ -1527,15 +1527,15 @@ Obtains the representation of a **TimeZone** object in the specified locale.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------- | ---- | -------------------- | | ------ | ------- | --------- | ---------------------------------------- |
| locale | string | No | System locale ID. | | locale | string | No | System locale ID. |
| isDST | boolean | No | Whether to consider DST when obtaining the representation of the **TimeZone** object.| | isDST | boolean | No | Whether to consider DST when obtaining the representation of the **TimeZone** object. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------------- | | ------ | ---------------------------------------- |
| string | Representation of the **TimeZone** object in the specified locale.| | string | Representation of the **TimeZone** object in the specified locale. |
**Example** **Example**
``` ```
...@@ -1553,9 +1553,9 @@ Obtains the offset between the time zone represented by a **TimeZone** object an ...@@ -1553,9 +1553,9 @@ Obtains the offset between the time zone represented by a **TimeZone** object an
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------------------- | | ------ | ---------------------------------------- |
| number | Offset between the time zone represented by the **TimeZone** object and the UTC time zone.| | number | Offset between the time zone represented by the **TimeZone** object and the UTC time zone. |
**Example** **Example**
``` ```
...@@ -1573,9 +1573,9 @@ Obtains the offset between the time zone represented by a **TimeZone** object an ...@@ -1573,9 +1573,9 @@ Obtains the offset between the time zone represented by a **TimeZone** object an
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ----------------------- | | ------ | ---------------------------------------- |
| number | Offset between the time zone represented by the **TimeZone** object and the UTC time zone at a certain time point.| | number | Offset between the time zone represented by the **TimeZone** object and the UTC time zone at a certain time point. |
**Example** **Example**
``` ```
...@@ -1592,9 +1592,9 @@ Obtains the list of time zone IDs supported by the system. ...@@ -1592,9 +1592,9 @@ Obtains the list of time zone IDs supported by the system.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------------------- | ----------- | | ------------------- | ---------------------------------------- |
| Array&lt;string&gt; | List of time zone IDs supported by the system.| | Array&lt;string&gt; | List of time zone IDs supported by the system. |
**Example** **Example**
```ts ```ts
...@@ -1611,9 +1611,9 @@ Obtains the list of time zone city IDs supported by the system. ...@@ -1611,9 +1611,9 @@ Obtains the list of time zone city IDs supported by the system.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------------------- | ------------- | | ------------------- | ---------------------------------------- |
| Array&lt;string&gt; | List of time zone city IDs supported by the system.| | Array&lt;string&gt; | List of time zone city IDs supported by the system. |
**Example** **Example**
```ts ```ts
...@@ -1630,15 +1630,15 @@ Obtains the localized display of a time zone city in the specified locale. ...@@ -1630,15 +1630,15 @@ Obtains the localized display of a time zone city in the specified locale.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ------ | | ------ | ------ | --------- | ------------------ |
| cityID | string | Yes | Time zone city ID.| | cityID | string | Yes | Time zone city ID. |
| locale | string | Yes | Locale ID. | | locale | string | Yes | Locale ID. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | ------------------ | | ------ | ---------------------------------------- |
| string | Localized display of the time zone city in the specified locale.| | string | Localized display of the time zone city in the specified locale. |
**Example** **Example**
```ts ```ts
...@@ -1655,14 +1655,14 @@ Obtains the **TimeZone** object corresponding to the specified time zone city ID ...@@ -1655,14 +1655,14 @@ Obtains the **TimeZone** object corresponding to the specified time zone city ID
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ------ | | ------ | ------ | --------- | ------------------ |
| cityID | string | Yes | Time zone city ID.| | cityID | string | Yes | Time zone city ID. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------- | ----------- | | -------- | ---------------------------------------- |
| TimeZone | **TimeZone** object corresponding to the specified time zone city ID.| | TimeZone | **TimeZone** object corresponding to the specified time zone city ID. |
**Example** **Example**
```ts ```ts
...@@ -1683,14 +1683,14 @@ This is a system API. ...@@ -1683,14 +1683,14 @@ This is a system API.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | 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.| | 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** **Return value**
| Type | Description | | 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.| | 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** **Example**
```ts ```ts
...@@ -1707,9 +1707,9 @@ Checks whether the local digit switch is turned on. ...@@ -1707,9 +1707,9 @@ Checks whether the local digit switch is turned on.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return value** **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** **Example**
```ts ```ts
...@@ -1729,9 +1729,9 @@ Obtains a list of IDs supported by the **Transliterator** object. ...@@ -1729,9 +1729,9 @@ Obtains a list of IDs supported by the **Transliterator** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return value** **Return value**
| Type | Description | | Type | Description |
| -------- | ---------- | | -------- | ---------------------------------------- |
| string[] | List of IDs supported by the **Transliterator** object.| | string[] | List of IDs supported by the **Transliterator** object. |
**Example** **Example**
```ts ```ts
...@@ -1748,14 +1748,14 @@ Creates a **Transliterator** object. ...@@ -1748,14 +1748,14 @@ Creates a **Transliterator** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | -------- | | ---- | ------ | --------- | ---------------------------------------- |
| id | string | Yes | ID supported by the **Transliterator** object.| | id | string | Yes | ID supported by the **Transliterator** object. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------------------------------- | ----- | | ---------------------------------- | -------------------------- |
| [Transliterator](#transliterator9) | **Transliterator** object.| | [Transliterator](#transliterator9) | **Transliterator** object. |
**Example** **Example**
```ts ```ts
...@@ -1772,14 +1772,14 @@ Converts the input string from the source format to the target format. ...@@ -1772,14 +1772,14 @@ Converts the input string from the source format to the target format.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ------ | | ---- | ------ | --------- | ------------- |
| text | string | Yes | Input string.| | text | string | Yes | Input string. |
**Return value** **Return value**
| Type | Description | | Type | Description |
| ------ | -------- | | ------ | -------------- |
| string | Target string.| | string | Target string. |
**Example** **Example**
```ts ```ts
......
en/application-dev/reference/apis/js-apis-intl.md
浏览文件 @ 62e0baeb
...@@ -2,10 +2,10 @@ ...@@ -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. 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** > **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 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'; ...@@ -23,18 +23,18 @@ import Intl from '@ohos.intl';
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
| Name | Type | Readable | Writable | Description | | Name | Type | Readable | Writable | Description |
| --------------- | ------- | ---- | ---- | ---------------------------------------- | | --------------- | ------- | -------- | -------- | ---------------------------------------- |
| language | string | Yes | No | Language associated with the locale, for example, **zh**. | | language | string | Yes | No | Language associated with the locale, for example, **zh**. |
| script | string | Yes | No | Script type of the language, for example, **Hans**. | | script | string | Yes | No | Script type of the language, for example, **Hans**. |
| region | string | Yes | No | Region associated with the locale, for example, **CN**. | | 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**. | | 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**.| | 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**.| | 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**.| | 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**.| | 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**.| | 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. | | numeric | boolean | Yes | No | Whether to apply special collation rules for numeric characters. |
### constructor<sup>8+</sup> ### constructor<sup>8+</sup>
...@@ -60,10 +60,10 @@ Creates a Locale object. ...@@ -60,10 +60,10 @@ Creates a Locale object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ------------- | ---- | ---------------------------- | | ------- | ------------- | --------- | ---------------------------------------- |
| locale | string | Yes | A string containing locale information, including the language, optional script, and region.| | locale | string | Yes | A string containing locale information, including the language, optional script, and region. |
| options | LocaleOptions | No | Options for creating the **Locale** object. | | options | LocaleOptions | No | Options for creating the **Locale** object. |
**Example** **Example**
```js ```js
...@@ -80,9 +80,9 @@ Converts locale information to a string. ...@@ -80,9 +80,9 @@ Converts locale information to a string.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ----------- | | ------ | ------------------------------------- |
| string | String containing locale information.| | string | String containing locale information. |
**Example** **Example**
```js ```js
...@@ -100,9 +100,9 @@ Maximizes information of the **Locale** object. If the script and locale informa ...@@ -100,9 +100,9 @@ Maximizes information of the **Locale** object. If the script and locale informa
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ----------------- | ---------- | | ----------------- | ---------------------------------------- |
| [Locale](#locale) | **Locale** object with the maximized information.| | [Locale](#locale) | **Locale** object with the maximized information. |
**Example** **Example**
```js ```js
...@@ -120,9 +120,9 @@ Minimizes information of the **Locale** object. If the script and locale informa ...@@ -120,9 +120,9 @@ Minimizes information of the **Locale** object. If the script and locale informa
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ----------------- | ---------- | | ----------------- | ---------------------------------------- |
| [Locale](#locale) | **Locale** object with the minimized information.| | [Locale](#locale) | **Locale** object with the minimized information. |
**Example** **Example**
```js ```js
...@@ -137,14 +137,14 @@ Represents the locale options. ...@@ -137,14 +137,14 @@ Represents the locale options.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
| Name | Type | Readable | Writable | Description | | 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**.| | 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**.| | 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**.| | 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**.| | 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. | | 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**.| | caseFirst | string | Yes | Yes | Whether upper case or lower case is sorted first. The value can be **upper**, **lower**, or **false**. |
## DateTimeFormat ## DateTimeFormat
...@@ -173,10 +173,10 @@ Creates a **DateTimeOptions** object for the specified locale. ...@@ -173,10 +173,10 @@ Creates a **DateTimeOptions** object for the specified locale.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ----------------------------------- | ---- | ---------------------------- | | ------- | ----------------------------------- | --------- | ---------------------------------------- |
| locale | string \| Array&lt;string&gt; | Yes | A string containing locale information, including the language, optional script, and region.| | locale | string \| Array&lt;string&gt; | Yes | A string containing locale information, including the language, optional script, and region. |
| options | [DateTimeOptions](#datetimeoptions) | No | Options for creating a **DateTimeFormat** object. | | options | [DateTimeOptions](#datetimeoptions) | No | Options for creating a **DateTimeFormat** object. |
**Example** **Example**
```js ```js
...@@ -199,14 +199,14 @@ Formats the specified date and time. ...@@ -199,14 +199,14 @@ Formats the specified date and time.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ---- | ---- | ------- | | ---- | ---- | --------- | ------------------------------ |
| date | Date | Yes | Date and time to be formatted.| | date | Date | Yes | Date and time to be formatted. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ------------ | | ------ | ---------------------------------------- |
| string | A string containing the formatted date and time.| | string | A string containing the formatted date and time. |
**Example** **Example**
```js ```js
...@@ -225,15 +225,15 @@ Formats the specified date range. ...@@ -225,15 +225,15 @@ Formats the specified date range.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ---- | ---- | -------- | | --------- | ---- | --------- | ------------------------------------ |
| startDate | Date | Yes | Start date and time to be formatted.| | startDate | Date | Yes | Start date and time to be formatted. |
| endDate | Date | Yes | End date and time to be formatted.| | endDate | Date | Yes | End date and time to be formatted. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | -------------- | | ------ | ---------------------------------------- |
| string | A string containing the formatted date and time range.| | string | A string containing the formatted date and time range. |
**Example** **Example**
```js ```js
...@@ -253,9 +253,9 @@ Obtains the formatting options for **DateTimeFormat** object. ...@@ -253,9 +253,9 @@ Obtains the formatting options for **DateTimeFormat** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ----------------------------------- | ----------------------------- | | ----------------------------------- | ---------------------------------------- |
| [DateTimeOptions](#datetimeoptions) | Formatting options for **DateTimeFormat** objects.| | [DateTimeOptions](#datetimeoptions) | Formatting options for **DateTimeFormat** objects. |
**Example** **Example**
```js ```js
...@@ -270,27 +270,27 @@ Provides the options for the **DateTimeFormat** object. ...@@ -270,27 +270,27 @@ Provides the options for the **DateTimeFormat** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
| Name | Type | Readable | Writable | Description | | Name | Type | Readable | Writable | Description |
| --------------- | ------- | ---- | ---- | ---------------------------------------- | | --------------- | ------- | -------- | -------- | ---------------------------------------- |
| locale | string | Yes | No | Locale, for example, **zh-Hans-CN**. | | 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**.| | 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**.| | 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**.| | 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. | | 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**.| | 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. | | 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**.| | 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**.| | 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**. | | 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**.| | 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**. | | 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**. | | 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**. | | 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**. | | 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. | | 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**.| | 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**.| | 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**.| | formatMatcher | string | Yes | Yes | Format matching algorithm. The value can be **basic** or **best fit**. |
## NumberFormat ## NumberFormat
...@@ -319,10 +319,10 @@ Creates a **NumberFormat** object for the specified locale. ...@@ -319,10 +319,10 @@ Creates a **NumberFormat** object for the specified locale.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
Parameters Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ------------------------------- | ---- | ---------------------------- | | ------- | ------------------------------- | --------- | ---------------------------------------- |
| locale | string \| Array&lt;string&gt; | Yes | A string containing locale information, including the language, optional script, and region.| | locale | string \| Array&lt;string&gt; | Yes | A string containing locale information, including the language, optional script, and region. |
| options | [NumberOptions](#numberoptions) | No | Options for creating a **NumberFormat** object. | | options | [NumberOptions](#numberoptions) | No | Options for creating a **NumberFormat** object. |
**Example** **Example**
```js ```js
...@@ -339,14 +339,14 @@ Formats a number. ...@@ -339,14 +339,14 @@ Formats a number.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ---- | | ------ | ------ | --------- | ----------------------- |
| number | number | Yes | Number to be formatted.| | number | number | Yes | Number to be formatted. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ---------- | | ------ | ----------------- |
| string | Formatted number.| | string | Formatted number. |
**Example** **Example**
...@@ -365,9 +365,9 @@ Obtains the options of the **NumberFormat** object. ...@@ -365,9 +365,9 @@ Obtains the options of the **NumberFormat** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------------------------------- | --------------------------- | | ------------------------------- | ---------------------------------------- |
| [NumberOptions](#numberoptions) | Formatting options for **NumberFormat** objects.| | [NumberOptions](#numberoptions) | Formatting options for **NumberFormat** objects. |
**Example** **Example**
...@@ -383,27 +383,27 @@ Provides the device capability. ...@@ -383,27 +383,27 @@ Provides the device capability.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
| Name | Type | Readable | Writable | Description | | Name | Type | Readable | Writable | Description |
| ------------------------ | ------- | ---- | ---- | ---------------------------------------- | | ------------------------ | ------- | -------- | -------- | ---------------------------------------- |
| locale | string | Yes | No | Locale, for example, **zh-Hans-CN**. | | locale | string | Yes | No | Locale, for example, **zh-Hans-CN**. |
| currency | string | Yes | Yes | Currency unit, for example, **EUR**, **CNY**, or **USD**. | | 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**.| | 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**.| | 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**. | | 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**.| | unitDisplay | string | Yes | Yes | Unit display format. The value can be **long**, **short**, or **medium**. |
| unitUsage<sup>8+</sup> | 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**.| | unitUsage<sup>8+</sup> | 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**.| | 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**. | | 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**.| | 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**.| | 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**.| | 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**.| | 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. | | 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**. | | 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**. | | 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**. | | 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**. | | 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**. | | maximumSignificantDigits | number | Yes | Yes | Maximum number of the least significant digits. The value ranges from **1** to **21**. |
## Collator<sup>8+</sup> ## Collator<sup>8+</sup>
...@@ -433,10 +433,10 @@ Creates a Collator object. ...@@ -433,10 +433,10 @@ Creates a Collator object.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ----------------------------------- | ---- | ---------------------------- | | ------- | ----------------------------------- | --------- | ---------------------------------------- |
| locale | string \| Array&lt;string&gt; | Yes | A string containing locale information, including the language, optional script, and region.| | locale | string \| Array&lt;string&gt; | Yes | A string containing locale information, including the language, optional script, and region. |
| options | [CollatorOptions](#collatoroptions) | No | Options for creating a **Collator** object. | | options | [CollatorOptions](#collatoroptions) | No | Options for creating a **Collator** object. |
**Example** **Example**
```js ```js
...@@ -453,15 +453,15 @@ Compares two strings based on the sorting policy of the **Collator** object. ...@@ -453,15 +453,15 @@ Compares two strings based on the sorting policy of the **Collator** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ------------ | | ------ | ------ | --------- | ------------------------- |
| first | string | Yes | First string to compare. | | first | string | Yes | First string to compare. |
| second | string | Yes | Second string to compare.| | second | string | Yes | Second string to compare. |
**Return Value** **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** **Example**
```js ```js
...@@ -479,9 +479,9 @@ Returns properties reflecting the locale and collation options of a **Collator** ...@@ -479,9 +479,9 @@ Returns properties reflecting the locale and collation options of a **Collator**
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ----------------------------------- | ----------------- | | ----------------------------------- | -------------------------------------- |
| [CollatorOptions](#collatoroptions) | Properties of the **Collator** object.| | [CollatorOptions](#collatoroptions) | Properties of the **Collator** object. |
**Example** **Example**
```js ```js
...@@ -496,15 +496,15 @@ Represents the properties of a **Collator** object. ...@@ -496,15 +496,15 @@ Represents the properties of a **Collator** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
| Name | Type | Readable | Writable | Description | | Name | Type | Readable | Writable | Description |
| ----------------- | ------- | ---- | ---- | ---------------------------------------- | | ----------------- | ------- | -------- | -------- | ---------------------------------------- |
| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**.| | 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**. | | 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**.| | 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**. | | 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**.| | 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**. | | 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**.| | caseFirst | string | Yes | Yes | Whether upper case or lower case is sorted first. The value can be **upper**, **lower**, or **false**. |
## PluralRules<sup>8+</sup> ## PluralRules<sup>8+</sup>
...@@ -533,10 +533,10 @@ Create a **PluralRules** object. ...@@ -533,10 +533,10 @@ Create a **PluralRules** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
Parameters Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ---------------------------------------- | ---- | ---------------------------- | | ------- | ---------------------------------------- | --------- | ---------------------------------------- |
| locale | string \| Array&lt;string&gt; | Yes | A string containing locale information, including the language, optional script, and region.| | locale | string \| Array&lt;string&gt; | Yes | A string containing locale information, including the language, optional script, and region. |
| options | [PluralRulesOptions](#pluralrulesoptions) | No | Options for creating a **PluralRules** object. | | options | [PluralRulesOptions](#pluralrulesoptions) | No | Options for creating a **PluralRules** object. |
**Example** **Example**
```js ```js
...@@ -553,14 +553,14 @@ Obtains a string that represents the singular-plural type of the specified numbe ...@@ -553,14 +553,14 @@ Obtains a string that represents the singular-plural type of the specified numbe
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ------------ | | ---- | ------ | --------- | ---------------------------------------- |
| n | number | Yes | Number for which the singular-plural type is to be obtained.| | n | number | Yes | Number for which the singular-plural type is to be obtained. |
**Return Value** **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** **Example**
```js ```js
...@@ -575,15 +575,15 @@ Represents the properties of a **PluralRules** object. ...@@ -575,15 +575,15 @@ Represents the properties of a **PluralRules** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
| Name | Type | Readable | Writable | Description | | Name | Type | Readable | Writable | Description |
| ------------------------ | ------ | ---- | ---- | ---------------------------------------- | | ------------------------ | ------ | -------- | -------- | ---------------------------------------- |
| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**.| | 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**. | | 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**. | | 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**. | | 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**. | | 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**. | | 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**. | | maximumSignificantDigits | number | Yes | Yes | Maximum number of the least significant digits. The value ranges from **1** to **21**. |
## RelativeTimeFormat<sup>8+</sup> ## RelativeTimeFormat<sup>8+</sup>
...@@ -612,10 +612,10 @@ Creates a **RelativeTimeFormat** object. ...@@ -612,10 +612,10 @@ Creates a **RelativeTimeFormat** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
Parameters Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ---------------------------------------- | ---- | ---------------------------- | | ------- | ---------------------------------------- | --------- | ---------------------------------------- |
| locale | string \| Array&lt;string&gt; | Yes | A string containing locale information, including the language, optional script, and region.| | locale | string \| Array&lt;string&gt; | Yes | A string containing locale information, including the language, optional script, and region. |
| options | [RelativeTimeFormatInputOptions](#relativetimeformatinputoptions) | No | Options for creating a **RelativeTimeFormat** object. | | options | [RelativeTimeFormatInputOptions](#relativetimeformatinputoptions) | No | Options for creating a **RelativeTimeFormat** object. |
**Example** **Example**
```js ```js
...@@ -632,15 +632,15 @@ Formats the value and unit based on the specified locale and formatting options. ...@@ -632,15 +632,15 @@ Formats the value and unit based on the specified locale and formatting options.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | --------- | ---------------------------------------- |
| value | number | Yes | Value to format. | | 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**.| | unit | string | Yes | Unit to format. The value can be any of the following: **year**, **quarter**, **month**, **week**, **day**, **hour**, **minute**, **second**. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------ | ---------- | | ------ | ------------------------------- |
| string | Relative time after formatting.| | string | Relative time after formatting. |
**Example** **Example**
```js ```js
...@@ -658,15 +658,15 @@ Returns an array of RelativeTimeFormat objects in parts for locale-aware formatt ...@@ -658,15 +658,15 @@ Returns an array of RelativeTimeFormat objects in parts for locale-aware formatt
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | --------- | ---------------------------------------- |
| value | number | Yes | Value to format. | | 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**.| | unit | string | Yes | Unit to format. The value can be any of the following: **year**, **quarter**, **month**, **week**, **day**, **hour**, **minute**, **second**. |
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ------------------- | --------------------------- | | ------------------- | ---------------------------------------- |
| Array&lt;object&gt; | An array of **RelativeTimeFormat** objects in parts.| | Array&lt;object&gt; | An array of **RelativeTimeFormat** objects in parts. |
**Example** **Example**
```js ```js
...@@ -684,9 +684,9 @@ Obtains the formatting options for **RelativeTimeFormat** objects. ...@@ -684,9 +684,9 @@ Obtains the formatting options for **RelativeTimeFormat** objects.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
**Return Value** **Return Value**
| Type | Description | | Type | Description |
| ---------------------------------------- | --------------------------------- | | ---------------------------------------- | ---------------------------------------- |
| [RelativeTimeFormatResolvedOptions](#relativetimeformatresolvedoptions) | Formatting options for **RelativeTimeFormat** objects.| | [RelativeTimeFormatResolvedOptions](#relativetimeformatresolvedoptions) | Formatting options for **RelativeTimeFormat** objects. |
**Example** **Example**
```js ```js
...@@ -701,11 +701,11 @@ Represents the properties of a **RelativeTimeFormat** object. ...@@ -701,11 +701,11 @@ Represents the properties of a **RelativeTimeFormat** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
| Name | Type | Readable | Writable | Description | | Name | Type | Readable | Writable | Description |
| ------------- | ------ | ---- | ---- | ---------------------------------------- | | ------------- | ------ | -------- | -------- | ---------------------------------------- |
| localeMatcher | string | Yes | Yes | Locale matching algorithm. The value can be **lookup** or **best fit**.| | 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**. | | 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**.| | style | string | Yes | Yes | Length of an internationalized message. The value can be **long**, **short**, or **narrow**. |
## RelativeTimeFormatResolvedOptions<sup>8+</sup> ## RelativeTimeFormatResolvedOptions<sup>8+</sup>
...@@ -714,9 +714,9 @@ Represents the properties of a **RelativeTimeFormat** object. ...@@ -714,9 +714,9 @@ Represents the properties of a **RelativeTimeFormat** object.
**System capability**: SystemCapability.Global.I18n **System capability**: SystemCapability.Global.I18n
| Name | Type | Readable | Writable | Description | | Name | Type | Readable | Writable | Description |
| --------------- | ------ | ---- | ---- | ---------------------------------------- | | --------------- | ------ | -------- | -------- | ---------------------------------------- |
| locale | string | Yes | Yes | A string containing locale information, including the language, optional script, and region. | | 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**. | | 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**.| | style | string | Yes | Yes | Length of an internationalized message. The value can be **long**, **short**, or **narrow**. |
| numberingSystem | string | Yes | Yes | Numbering system. | | numberingSystem | string | Yes | Yes | Numbering system. |
en/application-dev/reference/apis/js-apis-system-time.md
浏览文件 @ 62e0baeb
# 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. 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**<br>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.
> **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 ## Modules to Import
```js
```
import systemTime from '@ohos.systemTime'; import systemTime from '@ohos.systemTime';
``` ```
## systemTime.setTime ## systemTime.setTime
setTime(time : number, callback : AsyncCallback&lt;void&gt;) : void setTime(time : number, callback : AsyncCallback&lt;void&gt;) : void
...@@ -25,25 +24,24 @@ Sets the system time. This API uses an asynchronous callback to return the resul ...@@ -25,25 +24,24 @@ Sets the system time. This API uses an asynchronous callback to return the resul
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name | Type | Mandatory| Description |
| -------- | -------- | -------- | -------- | | -------- | ----------- | ---- | ---------------- |
| time | number | Yes| Timestamp to set, in milliseconds.| | time | number | Yes | Timestamp to set, in milliseconds. |
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.| | callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example** **Example**
```js ```js
// Set the system time to 2021-01-20 02:36:25. // Set the system time to 2021-01-20 02:36:25.
var time = 1611081385000; let time = 1611081385000;
systemTime.setTime(time, (error, data) => { systemTime.setTime(time, (error) => {
if (error) { if (error) {
console.error(`failed to systemTime.setTime because ` + JSON.stringify(error)); console.error(`Failed to set systemTime. Cause:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.setTime success data : ` + JSON.stringify(data)); console.log('Succeeded in setting systemTime.');
}); });
``` ```
## systemTime.setTime ## systemTime.setTime
...@@ -57,28 +55,27 @@ Sets the system time. This API uses a promise to return the result. ...@@ -57,28 +55,27 @@ Sets the system time. This API uses a promise to return the result.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type | Mandatory| Description |
| -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ------------------ |
| time | number | Yes| Timestamp to set, in milliseconds.| | time | number | Yes | Timestamp to set, in milliseconds.|
**Return value** **Return value**
| Type| Description| | Type | Description |
| -------- | -------- | | ------------------- | ------------------------- |
| Promise&lt;void&gt; | Promise used to return the result.| | Promise&lt;void&gt; | Promise that returns no value.|
**Example** **Example**
```js ```js
// Set the system time to 2021-01-20 02:36:25. // Set the system time to 2021-01-20 02:36:25.
var time = 1611081385000; let time = 1611081385000;
systemTime.setTime(time).then((data) => { systemTime.setTime(time).then(() => {
console.log(`systemTime.setTime success data : ` + JSON.stringify(data)); console.log('Succeeded in setting systemTime.');
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.setTime because ` + JSON.stringify(error)); console.error(`Failed to set systemTime. Cause:` + JSON.stringify(error));
}); });
``` ```
## systemTime.getCurrentTime<sup>8+</sup> ## systemTime.getCurrentTime<sup>8+</sup>
...@@ -90,23 +87,22 @@ Obtains the time elapsed since the Unix epoch. This API uses an asynchronous cal ...@@ -90,23 +87,22 @@ Obtains the time elapsed since the Unix epoch. This API uses an asynchronous cal
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | 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.| | isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds (ns).<br>- **false**: in milliseconds (ms).|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.| | callback | AsyncCallback&lt;number&gt; | Yes | Callback used to return the time elapsed since the Unix epoch. |
**Example** **Example**
```js ```js
systemTime.getCurrentTime(true, (error, data) => { systemTime.getCurrentTime(true, (error, data) => {
if (error) { if (error) {
console.error(`failed to systemTime.getCurrentTime because ` + JSON.stringify(error)); console.error(`Failed to get systemTime. Cause:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getCurrentTime success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting systemTime.Data: ` + JSON.stringify(data));
}); });
``` ```
## systemTime.getCurrentTime<sup>8+</sup> ## systemTime.getCurrentTime<sup>8+</sup>
...@@ -118,144 +114,139 @@ Obtains the time elapsed since the Unix epoch. This API uses a promise to return ...@@ -118,144 +114,139 @@ Obtains the time elapsed since the Unix epoch. This API uses a promise to return
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | 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.| | isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds (ns).<br>- **false**: in milliseconds (ms).|
**Return value** **Return value**
| Type| Description| | Type | Description |
| -------- | -------- | | --------------------- | --------------------------- |
| Promise&lt;number&gt; | Promise used to return the time.| | Promise&lt;number&gt; | Promise used to return the time elapsed since the Unix epoch.|
**Example** **Example**
```js ```js
systemTime.getCurrentTime().then((data) => { systemTime.getCurrentTime().then((data) => {
console.log(`systemTime.getCurrentTime success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting systemTime.Data: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.getCurrentTime because ` + JSON.stringify(error)); console.error(`Failed to get systemTime. Cause:` + JSON.stringify(error));
}); });
``` ```
## systemTime.getRealActiveTime<sup>8+</sup> ## systemTime.getRealActiveTime<sup>8+</sup>
getRealActiveTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): void getRealActiveTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): 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 **System capability**: SystemCapability.MiscServices.Time
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | 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.| | isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds (ns).<br>- **false**: in milliseconds (ms).|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.| | callback | AsyncCallback&lt;number&gt; | Yes | Callback used to return the time.|
**Example** **Example**
```js ```js
systemTime.getRealActiveTime(true, (error, data) => { systemTime.getRealActiveTime(true, (error, data) => {
if (error) { if (error) {
console.error(`failed to systemTime.getRealActiveTimebecause ` + JSON.stringify(error)); console.error(`Failed to get real active systemTime. Cause:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data));
}); });
``` ```
## systemTime.getRealActiveTime<sup>8+</sup> ## systemTime.getRealActiveTime<sup>8+</sup>
getRealActiveTime(isNano?: boolean): Promise&lt;number&gt; getRealActiveTime(isNano?: boolean): Promise&lt;number&gt;
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 **System capability**: SystemCapability.MiscServices.Time
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | 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.| | isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds (ns).<br>- **false**: in milliseconds (ms).|
**Return value** **Return value**
| Type| Description| | Type | Description |
| -------- | -------- | | -------------- | -------------------------------- |
| Promise&lt;number&gt; | Promise used to return the time.| | Promise&lt;number&gt; | Promise used to return the time elapsed since system startup, excluding the deep sleep time.|
**Example** **Example**
```js ```js
systemTime.getRealActiveTime().then((data) => { systemTime.getRealActiveTime().then((data) => {
console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.getRealActiveTime because ` + JSON.stringify(error)); console.error(`Failed to get real active systemTime. Cause:` + JSON.stringify(error));
}); });
``` ```
## systemTime.getRealTime<sup>8+</sup> ## systemTime.getRealTime<sup>8+</sup>
getRealTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): void getRealTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): 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 **System capability**: SystemCapability.MiscServices.Time
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | 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.| | isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds (ns).<br>- **false**: in milliseconds (ms).|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.| | callback | AsyncCallback&lt;number&gt; | Yes | Callback used to return the time. |
**Example** **Example**
```js ```js
systemTime.getRealTime(true, (error, data) => { systemTime.getRealTime(true, (error, data) => {
if (error) { if (error) {
console.error(`failed to systemTime.getRealTime because ` + JSON.stringify(error)); console.error(`Failed to get real systemTime. Cause:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getRealTime success data: ` + JSON.stringify(data)); console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data));
}); });
``` ```
## systemTime.getRealTime<sup>8+</sup> ## systemTime.getRealTime<sup>8+</sup>
getRealTime(isNano?: boolean): Promise&lt;number&gt; getRealTime(isNano?: boolean): Promise&lt;number&gt;
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 **System capability**: SystemCapability.MiscServices.Time
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | 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.| | isNano | boolean | No | Whether the time to return is in nanoseconds.<<br>- **true**: in nanoseconds (ns).<br>- **false**: in milliseconds (ms).|
**Return value** **Return value**
| Type| Description| | Type | Description |
| -------- | -------- | | --------------------- | ------------------------------- |
| Promise&lt;number&gt; | Promise used to return the time.| | Promise&lt;number&gt; | Promise used to return the time elapsed since system startup, including the deep sleep time.|
**Example** **Example**
```js ```js
systemTime.getRealTime().then((data) => { systemTime.getRealTime().then((data) => {
console.log(`systemTime.getRealTime success data: ` + JSON.stringify(data)); console.log(`Succeeded in getting real active systemTime. Data: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.getRealTime because ` + JSON.stringify(error)); console.error(`Failed to get real systemTime. Cause:` + JSON.stringify(error));
}); });
``` ```
## systemTime.setDate ## systemTime.setDate
...@@ -269,24 +260,23 @@ Sets the system date. This API uses an asynchronous callback to return the resul ...@@ -269,24 +260,23 @@ Sets the system date. This API uses an asynchronous callback to return the resul
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name | Type | Mandatory| Description |
| -------- | -------- | -------- | -------- | | -------- | ------------- | ---- | --------------------- |
| date | Date | Yes| Target date to set.| | date | Date | Yes | Target date to set. |
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.| | callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example** **Example**
```js ```js
var data = new Date("October 13, 2020 11:13:00"); let data = new Date("October 13, 2020 11:13:00");
systemTime.setDate(data,(error, data) => { systemTime.setDate(data,(error) => {
if (error) { if (error) {
console.error('failed to systemTime.setDate because ' + JSON.stringify(error)); console.error('Failed to set systemDate. Cause: ' + JSON.stringify(error));
return; return;
} }
console.info('systemTime.setDate success data : ' + JSON.stringify(data)); console.info('Succeeded in setting systemDate.');
}); });
``` ```
## systemTime.setDate ## systemTime.setDate
...@@ -300,27 +290,26 @@ Sets the system date. This API uses a promise to return the result. ...@@ -300,27 +290,26 @@ Sets the system date. This API uses a promise to return the result.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description |
| -------- | -------- | -------- | -------- | | ------ | ---- | ---- | ---------- |
| date | Date | Yes| Target date to set.| | date | Date | Yes | Target date to set.|
**Return value** **Return value**
| Type| Description| | Type | Description |
| -------- | -------- | | ------------------- | -------------------- |
| Promise&lt;void&gt; | Promise used to return the result.| | Promise&lt;void&gt; | Promise that returns no value.|
**Example** **Example**
```js ```js
var data = new Date("October 13, 2020 11:13:00"); let data = new Date("October 13, 2020 11:13:00");
systemTime.setDate(data).then((value) => { systemTime.setDate(data).then(() => {
console.log(`systemTime.setDate success data : ` + JSON.stringify(value)); console.log('Succeeded in setting systemDate.');
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.setDate because: ` + JSON.stringify(error)); console.error(`Failed to set systemDate. Cause: ` + JSON.stringify(error));
}); });
``` ```
## systemTime.getDate<sup>8+</sup> ## systemTime.getDate<sup>8+</sup>
...@@ -332,47 +321,45 @@ Obtains the current system date. This API uses an asynchronous callback to retur ...@@ -332,47 +321,45 @@ Obtains the current system date. This API uses an asynchronous callback to retur
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name | Type | Mandatory| Description |
| -------- | -------- | -------- | -------- | | -------- | -------------- | ---- | --------------------- |
| callback | AsyncCallback&lt;Date&gt; | Yes| Callback used to return the current system date.| | callback | AsyncCallback&lt;Date&gt; | Yes | Callback used to return the current system date.|
**Example** **Example**
```js ```js
systemTime.getDate((error, data) => { systemTime.getDate((error, data) => {
if (error) { if (error) {
console.error(`failed to systemTime.getDate because ` + JSON.stringify(error)); console.error(`Failed to get systemDate. Cause: ` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getDate success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting systemDate. Data: ` + JSON.stringify(data));
}); });
``` ```
## systemTime.getDate<sup>8+</sup> ## systemTime.getDate<sup>8+</sup>
getDate(): Promise&lt;Date&gt; getDate(): Promise&lt;Date&gt;
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 **System capability**: SystemCapability.MiscServices.Time
**Return value** **Return value**
| Type| Description| | Type | Description |
| -------- | -------- | | ------------------- | ----------------------------------------- |
| Promise&lt;Date&gt; | Promise used to return the current system date.| | Promise&lt;Date&gt; | Promise used to return the current system date.|
**Example** **Example**
```js ```js
systemTime.getDate().then((data) => { systemTime.getDate().then((data) => {
console.log(`systemTime.getDate success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting systemDate. Data: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.getDate because ` + JSON.stringify(error)); console.error(`Failed to get systemDate. Cause: ` + JSON.stringify(error));
}); });
``` ```
## systemTime.setTimezone ## systemTime.setTimezone
...@@ -386,23 +373,22 @@ Sets the system time zone. This API uses an asynchronous callback to return the ...@@ -386,23 +373,22 @@ Sets the system time zone. This API uses an asynchronous callback to return the
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name | Type | Mandatory| Description |
| -------- | -------- | -------- | -------- | | -------- | ------------- | ---- | -------------------------- |
| timezone | string | Yes| System time zone to set.| | timezone | string | Yes | System time zone to set. |
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.| | callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example** **Example**
```js ```js
systemTime.setTimezone('Asia/Shanghai', (error, data) => { systemTime.setTimezone('Asia/Shanghai', (error) => {
if (error) { if (error) {
console.error('failed to systemTime.setTimezone because ' + JSON.stringify(error)); console.error('Failed to set systemTimeZone. Cause: ' + JSON.stringify(error));
return; return;
} }
console.info('SystemTimePlugin systemTime.setTimezone success data : ' + JSON.stringify(data)); console.info('Succeeded in setting systemTimeZone.');
}); });
``` ```
## systemTime.setTimezone ## systemTime.setTimezone
...@@ -416,26 +402,25 @@ Sets the system time zone. This API uses a promise to return the result. ...@@ -416,26 +402,25 @@ Sets the system time zone. This API uses a promise to return the result.
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name | Type | Mandatory| Description |
| -------- | -------- | -------- | -------- | | -------- | ------ | ---- | ---------- |
| timezone | string | Yes| System time zone to set.| | timezone | string | Yes | System time zone to set.|
**Return value** **Return value**
| Type| Description| | Type | Description |
| -------- | -------- | | ------------------- | -------------------- |
| Promise&lt;void&gt; | Promise used to return the result.| | Promise&lt;void&gt; | Promise that returns no value.|
**Example** **Example**
```js ```js
systemTime.setTimezone('Asia/Shanghai').then((data) => { systemTime.setTimezone('Asia/Shanghai').then(() => {
console.log(`systemTime.setTimezone success data : ` + JSON.stringify(data)); console.log('Succeeded in setting systemTimeZone.');
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.setTimezone because: ` + JSON.stringify(error)); console.error(`Failed to set systemTimeZone. Cause: ` + JSON.stringify(error));
}); });
``` ```
## systemTime.getTimezone<sup>8+</sup> ## systemTime.getTimezone<sup>8+</sup>
...@@ -447,22 +432,21 @@ Obtains the system time zone. This API uses an asynchronous callback to return t ...@@ -447,22 +432,21 @@ Obtains the system time zone. This API uses an asynchronous callback to return t
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name | Type | Mandatory| Description |
| -------- | -------- | -------- | -------- | | -------- | --------- | ---- | ------------------------ |
| callback | AsyncCallback&lt;string&gt; | Yes| Callback used to return the system time zone.| | callback | AsyncCallback&lt;string&gt; | Yes | Callback used to return the system time zone.|
**Example** **Example**
```js ```js
systemTime.getTimezone((error, data) => { systemTime.getTimezone((error, data) => {
if (error) { if (error) {
console.error(`failed to systemTime.getTimezone because ` + JSON.stringify(error)); console.error(`Failed to get systemTimeZone. Cause: ` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getTimezone success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting systemTimeZone. Data: ` + JSON.stringify(data));
}); });
``` ```
## systemTime.getTimezone<sup>8+</sup> ## systemTime.getTimezone<sup>8+</sup>
...@@ -474,16 +458,16 @@ Obtains the system time zone. This API uses a promise to return the result. ...@@ -474,16 +458,16 @@ Obtains the system time zone. This API uses a promise to return the result.
**Return value** **Return value**
| Type| Description| | Type | Description |
| -------- | -------- | | --------------------- | ------------------------------------- |
| Promise&lt;string&gt; | Promise used to return the system time zone.| | Promise&lt;string&gt; | Promise used to return the system time zone.|
**Example** **Example**
```js ```js
systemTime.getTimezone().then((data) => { systemTime.getTimezone().then((data) => {
console.log(`systemTime.getTimezone success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting systemTimeZone. Data: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.getTimezone because ` + JSON.stringify(error)); console.error(`Failed to get systemTimeZone. Cause: ` + JSON.stringify(error));
}); });
``` ```
en/application-dev/reference/arkui-js/js-components-container-dialog.md
浏览文件 @ 62e0baeb
# dialog # dialog
The **&lt;dialog&gt;** 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 **\<dialog>** component is a custom dialog box.
## Required Permissions ## Required Permissions
None 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 | | Name | Type | Default Value | Mandatory | Description |
| --------------------- | ------- | ------------- | --------- | ---------------------------------- | | --------------------- | ------- | ----- | ---- | ------------ |
| dragable<sup>7+</sup> | boolean | false | No | Whether the pop-up can be dragged. | | dragable<sup>7+</sup> | 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 **&lt;dialog&gt;** component does not support the **focusable** and **click-effect** attributes. > The **\<dialog>** component does not support the **focusable** and **click-effect** attributes.
## Styles ## 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.|
| show<sup>7+</sup> | - | Triggered when the dialog box is displayed. |
| close<sup>7+</sup> | - | 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
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 | > **NOTE**
| ----- | --------- | -------------------- | >
| show | - | Shows a dialog box. | > Attributes and styles of a **\<dialog>** component cannot be dynamically updated.
| close | - | Closes a dialog box. |
> ![img](https://gitee.com/openharmony/docs/raw/master/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** Attributes and styles of a **\<dialog>** component cannot be dynamically updated.
## Example Code ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<div class="btn-div"> <div class="btn-div">
...@@ -73,6 +79,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte ...@@ -73,6 +79,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
</div> </div>
</dialog> </dialog>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
flex-direction: column; flex-direction: column;
...@@ -119,30 +128,33 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte ...@@ -119,30 +128,33 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
background-color: #F2F2F2; background-color: #F2F2F2;
text-color: #0D81F2; text-color: #0D81F2;
} }
```
```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
showDialog(e) { showDialog() {
this.$element('simpledialog').show() this.$element('simpledialog').show()
}, },
cancelDialog(e) { cancelDialog() {
prompt.showToast({ prompt.showToast({
message: 'Dialog cancelled' message: 'Dialog cancelled'
}) })
}, },
cancelSchedule(e) { cancelSchedule() {
this.$element('simpledialog').close() this.$element('simpledialog').close()
prompt.showToast({ prompt.showToast({
message: 'Successfully cancelled' message: 'Successfully cancelled'
}) })
}, },
setSchedule(e) { setSchedule() {
this.$element('simpledialog').close() this.$element('simpledialog').close()
prompt.showToast({ prompt.showToast({
message: 'Successfully confirmed' message: 'Successfully confirmed'
}) })
}, },
doubleclick(e){ doubleclick(){
prompt.showToast({ prompt.showToast({
message: 'doubleclick' message: 'doubleclick'
}) })
...@@ -150,4 +162,4 @@ export default { ...@@ -150,4 +162,4 @@ export default {
} }
``` ```
![img](figures/4.gif) ![4](figures/4.gif)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ 62e0baeb
...@@ -4,9 +4,9 @@ The **\<svg>** component is a basic container. It can be used as the root node o ...@@ -4,9 +4,9 @@ The **\<svg>** component is a basic container. It can be used as the root node o
> **NOTE** > **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> >
> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn. > - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
## Required Permissions ## Required Permissions
...@@ -15,21 +15,21 @@ None ...@@ -15,21 +15,21 @@ None
## Child Components ## Child Components
The following are supported: [\<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), and [\<animateTransform>](js-components-svg-animateTransform.md). The following are supported: [\<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), and [\<animateTransform>](js-components-svg-animatetransform.md).
## Attributes ## 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. 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| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------- | ------------- | --------- | ---------------------------------------- |
| id | string | - | No| Unique ID of the component.| | id | string | - | No | Unique ID of the component. |
| width | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component width.| | width | &lt;length&gt;\|&lt;percentage&gt; | - | No | Component width. |
| height | &lt;length&gt;\|&lt;percentage&gt; | - | No| Component height.| | height | &lt;length&gt;\|&lt;percentage&gt; | - | No | Component height. |
| x | &lt;length&gt;\|&lt;percentage&gt; | - | No| X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. | | x | &lt;length&gt;\|&lt;percentage&gt; | - | No | X-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| y | &lt;length&gt;\|&lt;percentage&gt; | | No| Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. | | y | &lt;length&gt;\|&lt;percentage&gt; | | No | Y-coordinate of the current **\<svg>** component. The settings do not work for the root **\<svg>** node. |
| viewBox | string | - | No| View box of the current **\<svg>** component. The supported format is \<number number number number>. 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 **\<svg>** component. The view box is scaled in center-aligned mode. | | viewBox | string | - | No | View box of the current **\<svg>** component. The supported format is \<number number number number>. 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 **\<svg>** component. The view box is scaled in center-aligned mode. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-divider.md
浏览文件 @ 62e0baeb
# Divider # Divider
The **\<Divider>** component is used to separate content blocks and elements.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Divider&gt;** component is used to separate content blocks and content elements.
## Required Permissions
None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
Divider() Divider()
## Attributes ## Attributes
| Name | Type | Default Value | Description | In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| -------- | -------- | -------- | -------- |
| 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. | | Name | Type | Description |
| color | Color | - | Color of the divider. | | ----------- | ---------- | ------------------ |
| strokeWidth | Length | 1 | Width of the divider. | | vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.<br>**true**: A vertical divider is used.<br>Default value: **false**|
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle-enums) | LineCapStyle.Butt | Cap style of the divider. | | color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.|
| strokeWidth | number \| string | Width of the divider.<br>Default value: **1**|
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**|
## Events ## Events
Universal events are not supported. The universal events are not supported.
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct DividerExample { struct DividerExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ 62e0baeb
# Image # Image
The **\<image>** component is used to render and display images. The **\<Image>** 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 ## 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). 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 ## Child Components
Not supported Not supported
...@@ -19,6 +21,8 @@ Not supported ...@@ -19,6 +21,8 @@ Not supported
Image(src: string | PixelMap | Resource) Image(src: string | PixelMap | Resource)
Obtains an image from the specified source for subsequent rendering and display.
**Parameters** **Parameters**
| Name| Type | Mandatory| Default Value| Description | | Name| Type | Mandatory| Default Value| Description |
...@@ -47,10 +51,10 @@ Image(src: string | PixelMap | Resource) ...@@ -47,10 +51,10 @@ Image(src: string | PixelMap | Resource)
## ImageInterpolation ## ImageInterpolation
| Name | Description | | Name | Description |
| ------ | ------------------------ | | ------ | ------------------------- |
| None | Interpolation image data is not used. | | 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.| | 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. | | Medium | The interpolation image data is used at the medium level. |
| Low | The interpolation image data is used at the low level. | | Low | The interpolation image data is used at the low level. |
...@@ -63,10 +67,11 @@ Image(src: string | PixelMap | Resource) ...@@ -63,10 +67,11 @@ Image(src: string | PixelMap | Resource)
## Events ## Events
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------------- | | ---------------------------------------- | ---------------------------------------- |
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The loaded image is returned. | | onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br>|
| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading. | | onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>|
| onFinish(event: () =&gt; 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.| | onFinish(event: () =&gt; 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.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @ 62e0baeb
...@@ -32,7 +32,7 @@ In addition to the [universal text style](ts-universal-attributes-text-style.md) ...@@ -32,7 +32,7 @@ In addition to the [universal text style](ts-universal-attributes-text-style.md)
| -------- | -------- | -------- | | -------- | -------- | -------- |
| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None<br>color: Color.Black<br>} | | decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None<br>color: Color.Black<br>} |
| letterSpacing | number \| string | Letter spacing. | | letterSpacing | number \| string | Letter spacing. |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **Normal** | | textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **TextCase.Normal**|
## Events ## Events
......
en/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ 62e0baeb
# Web # Web
> **NOTE**<br> > **NOTE**<br>
>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 **<Web\>** component can be used to display web pages. The **<Web\>** component can be used to display web pages.
...@@ -18,10 +18,10 @@ Not supported ...@@ -18,10 +18,10 @@ Not supported
Table 1 options Table 1 options
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---------- | ------------------------------- | ---- | ---- | ------- | | ---------- | ------------------------------- | --------- | ------------- | ------------------------------- |
| src | string | Yes | - | Address of a web page resource.| | src | string | Yes | - | Address of a web page resource. |
| controller | [WebController](#webcontroller) | No | - | Controller. | | controller | [WebController](#webcontroller) | No | - | Controller. |
> **NOTE**<br> > **NOTE**<br>
...@@ -31,22 +31,22 @@ Not supported ...@@ -31,22 +31,22 @@ Not supported
> - Only local audio and video are supported for playback. > - Only local audio and video are supported for playback.
## Attributes ## 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.| | 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.| | 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/ts-application-resource-access.md#referencing-resources). By default, this feature is disabled.| | 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. | | imageAccess | boolean | true | Whether to enable automatic image loading. By default, this feature is enabled. |
| javaScriptProxy | { <br> object: object, <br> name: string, <br> methodList: Array\<string\>, <br> controller: WebController <br>} | - | 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.<br> **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.<br> **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.<br> **methodList** indicates the methods of the JavaScript object to be registered at the application side.<br> **controller** indicates the controller.| | javaScriptProxy | { <br> object: object, <br> name: string, <br> methodList: Array\<string\>, <br> controller: WebController <br>} | - | 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.<br> **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.<br> **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.<br> **methodList** indicates the methods of the JavaScript object to be registered at the application side.<br> **controller** indicates the controller. |
| javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. | | 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.| | 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.| | 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. | | 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. | | 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. | | databaseAccess | boolean | false | Whether to enable database access. By default, this feature is disabled. |
| cacheMode | [CacheMode](#cachemode) | CacheMode.Default | Cache mode. | | cacheMode | [CacheMode](#cachemode) | CacheMode.Default | Cache mode. |
| textZoomAtio | number | 100 | Text zoom ratio of the page. The default value is **100**, which indicates 100%. | | textZoomAtio | number | 100 | Text zoom ratio of the page. The default value is **100**, which indicates 100%. |
| userAgent | string | - | User agent. | | userAgent | string | - | User agent. |
> **NOTE**<br> > **NOTE**<br>
> >
...@@ -56,8 +56,8 @@ Not supported ...@@ -56,8 +56,8 @@ Not supported
The universal events are not supported. The universal events are not supported.
| Name | Description | | Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ---------------------------------------- | ---------------------------------------- |
| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **alert()** is invoked to display an alert dialog box on the web page.<br>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 **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> | | onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **alert()** is invoked to display an alert dialog box on the web page.<br>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 **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> |
| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when the current page is about to exit after the user refreshes or closes the page.<br>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 **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> | | onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when the current page is about to exit after the user refreshes or closes the page.<br>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 **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> |
| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **confirm()** is invoked by the web page.<br>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 **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> | | onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **confirm()** is invoked by the web page.<br>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 **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> |
...@@ -65,8 +65,8 @@ The universal events are not supported. ...@@ -65,8 +65,8 @@ The universal events are not supported.
| onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | <p>Triggered when a download task starts on the web page.<br>**url**: URL for the download task.<br>**userAgent**: name of the user agent (UA) for the download task.<br>**contentDisposition**: Content-Disposition response header returned by the server, which may be empty.<br>**mimetype**: content media type (MIME) returned by the server.<br>**contentLength**: length of the file returned by the server.</p> | | onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | <p>Triggered when a download task starts on the web page.<br>**url**: URL for the download task.<br>**userAgent**: name of the user agent (UA) for the download task.<br>**contentDisposition**: Content-Disposition response header returned by the server, which may be empty.<br>**mimetype**: content media type (MIME) returned by the server.<br>**contentLength**: length of the file returned by the server.</p> |
| onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), error: [WebResourceError](#webresourceerror) }) => void) | <p>Triggered when an error occurs during web page loading.<br>For better results, simplify the implementation logic in the callback.<br>**request**: encapsulation of a web page request.<br>**error**: encapsulation of a web page resource loading error.</p> | | onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), error: [WebResourceError](#webresourceerror) }) => void) | <p>Triggered when an error occurs during web page loading.<br>For better results, simplify the implementation logic in the callback.<br>**request**: encapsulation of a web page request.<br>**error**: encapsulation of a web page resource loading error.</p> |
| onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), response: [WebResourceResponse](#webresourceresponse) }) => void) | <p>Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.<br>**request**: encapsulation of a web page request.<br>**response**: encapsulation of a web page response.</p> | | onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), response: [WebResourceResponse](#webresourceresponse) }) => void) | <p>Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.<br>**request**: encapsulation of a web page request.<br>**response**: encapsulation of a web page response.</p> |
| onPageBegin(callback: (event?: { url: string }) => void) | <p>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.<br>**url**: URL of the page.</p> | | onPageBegin(callback: (event?: { url: string }) => void) | <p>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.<br>**url**: URL of the page.</p> |
| onPageEnd(callback: (event?: { url: string }) => void) | <p>Triggered when the web page loading is complete. This API is triggered only for the main frame content.<br>**url**: URL of the page.</p> | | onPageEnd(callback: (event?: { url: string }) => void) | <p>Triggered when the web page loading is complete. This API is triggered only for the main frame content.<br>**url**: URL of the page.</p> |
| onProgressChange(callback: (event?: { newProgress: number }) => void) | <p>Triggered when the web page loading progress changes.<br>**newProgress**: new loading progress. The value is an integer ranging from 0 to 100.</p> | | onProgressChange(callback: (event?: { newProgress: number }) => void) | <p>Triggered when the web page loading progress changes.<br>**newProgress**: new loading progress. The value is an integer ranging from 0 to 100.</p> |
| onTitleReceive(callback: (event?: { title: string }) => void) | <p>Triggered when the document title of the web page is changed.<br>**title**: document title.</p> | | onTitleReceive(callback: (event?: { title: string }) => void) | <p>Triggered when the document title of the web page is changed.<br>**title**: document title.</p> |
| onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) | <p>Triggered when loading of the web page is complete. This callback function is used by an application to update the historical link it accessed.<br>**url**: URL to be accessed.<br>**isRefreshed**: whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.</p> | | onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) | <p>Triggered when loading of the web page is complete. This callback function is used by an application to update the historical link it accessed.<br>**url**: URL to be accessed.<br>**isRefreshed**: whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.</p> |
...@@ -76,120 +76,120 @@ The universal events are not supported. ...@@ -76,120 +76,120 @@ The universal events are not supported.
## ConsoleMessage ## ConsoleMessage
| Name | Description | | Name | Description |
| ------------------------------- | ---------------------- | | ---------------------------------------- | ---------------------------------------- |
| getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. | | getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. |
| getMessage(): string | Obtains the log information of the **ConsoleMessage**.| | getMessage(): string | Obtains the log information of the **ConsoleMessage**. |
| getMessageLevel(): [MessageLevel](#messagelevel-enums) | Obtains the log information level 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. | | getSourceId(): string | Obtains the path and name of the web page source file. |
## MessageLevel Enums ## MessageLevel Enums
| Name | Description | | Name | Description |
| ----- | :---- | | ----- | :----------------- |
| Debug | Debug level.| | Debug | Debug level. |
| Error | Error level.| | Error | Error level. |
| Info | Information level.| | Info | Information level. |
| Log | Log level.| | Log | Log level. |
| Warn | Warning level. | | Warn | Warning level. |
## JsResult ## JsResult
Provides the result returned to the **\<Web>** component to indicate the user operation performed in the dialog box. Provides the result returned to the **\<Web>** component to indicate the user operation performed in the dialog box.
| Name | Description | | Name | Description |
| --------------------- | ----------------------- | | --------------------- | ---------------------------------------- |
| handleCancel(): void | <p>The user's cancel operation in the dialog box.</p> | | handleCancel(): void | <p>The user's cancel operation in the dialog box.</p> |
| handleConfirm(): void | <p>The user's confirm operation in the dialog box.</p> | | handleConfirm(): void | <p>The user's confirm operation in the dialog box.</p> |
## WebResourceError ## WebResourceError
| Name | Description | | Name | Description |
| ---------------------- | ------------ | | ---------------------- | ---------------------------------------- |
| getErrorCode(): number | Obtains the error code for resource loading. | | 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 ## WebResourceRequest
| Name | Description | | Name | Description |
| ---------------------------------------- | -------------------- | | ---------------------------------------- | ---------------------------------------- |
| getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. | | getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. |
| getRequestUrl(): string | Obtains the URL of the resource request. | | getRequestUrl(): string | Obtains the URL of the resource request. |
| isMainFrame(): boolean | Checks whether the resource request is in the main frame. | | isMainFrame(): boolean | Checks whether the resource request is in the main frame. |
| isRedirect(): boolean | Checks whether the resource request is redirected by the server. | | 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).| | isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap). |
## Header ## Header
Describes the request/response header returned by the **\<Web>** component. Describes the request/response header returned by the **\<Web>** component.
| Name | Type | Description | | Name | Type | Description |
| ----------- | ------ | ------------- | | ----------- | ------ | ------------------------------------- |
| headerKey | string | Key of the request/response header. | | headerKey | string | Key of the request/response header. |
| headerValue | string | Value of the request/response header.| | headerValue | string | Value of the request/response header. |
## WebResourceResponse ## WebResourceResponse
| Name | Description | | Name | Description |
| ---------------------------------------- | ------------------ | | ---------------------------------------- | ---------------------------------------- |
| getReasonMessage(): string | Obtains the status code description of the resource response. | | getReasonMessage(): string | Obtains the status code description of the resource response. |
| getResponseCode(): number | Obtains the status code of the resource response. | | getResponseCode(): number | Obtains the status code of the resource response. |
| getResponseData(): string | Obtains the data in the resource response. | | getResponseData(): string | Obtains the data in the resource response. |
| getResponseEncoding(): string | Obtains the encoding of the resource response. | | getResponseEncoding(): string | Obtains the encoding of the resource response. |
| getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. | | getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. |
| getResponseMimeType(): string | Obtains the media (MIME) type of the resource response.| | getResponseMimeType(): string | Obtains the media (MIME) type of the resource response. |
## RenderExitReason ## RenderExitReason
Explains why the rendering process exits. Explains why the rendering process exits.
| Name | Description | | Name | Description |
| -------------------------- | ----------------- | | ---------------------------- | ---------------------------------------- |
| PROCESS_ABNORMAL_TERMINATION | The rendering process exits abnormally. | | PROCESS_ABNORMAL_TERMINATION | The rendering process exits abnormally. |
| PROCESS_WAS_KILLED | The rendering process receives a SIGKILL message or is manually terminated.| | 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_CRASHED | The rendering process crashes due to a segmentation error or other errors. |
| PROCESS_OOM | The program memory is running low. | | PROCESS_OOM | The program memory is running low. |
| PROCESS_EXIT_UNKNOWN | Other reason. | | PROCESS_EXIT_UNKNOWN | Other reason. |
## MixedMode ## MixedMode
| Name | Description | | Name | Description |
| ---------- | ---------------------------------- | | ---------- | ---------------------------------------- |
| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded.| | 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. | | 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. | | None | HTTP and HTTPS hybrid content cannot be loaded. |
## CacheMode ## CacheMode
| Name | Description | | 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.| | 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. | | 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. | | 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. | | Only | The cache alone is used to load the resources. |
## FileSelectorResult ## FileSelectorResult
Notifies the **\<Web>** component of the file selection result. Notifies the **\<Web>** component of the file selection result.
| Name | Description | | Name | Description |
| ---------------------------------------------- | ------------------------------------------------------------ | | ---------------------------------------- | ---------------------------------------- |
| handleFileList(fileList: Array\<string>): void | Instructs the **\<Web>** component to select a file.<br>**fileList**: list of files to operate. | | handleFileList(fileList: Array\<string>): void | Instructs the **\<Web>** component to select a file.<br>**fileList**: list of files to operate. |
## FileSelectorParam ## FileSelectorParam
| Name | Description | | Name | Description |
| -------------------------------- | ------------ | | ----------------------------- | ---------------------------------------- |
| title(): string | Title of the file selector. | | title(): string | Title of the file selector. |
| mode(): FileSelectorMode | Mode of the file selector. | | mode(): FileSelectorMode | Mode of the file selector. |
| acceptType(): Array\<string\> | File filtering type. | | acceptType(): Array\<string\> | File filtering type. |
| isCapture(): boolean | Whether multimedia capabilities are invoked.| | isCapture(): boolean | Whether multimedia capabilities are invoked. |
## FileSelectorMode ## FileSelectorMode
| Name | Description | | Name | Description |
| -------------------- | ---------- | | ----------------------- | ------------------------------- |
| FILE_OPEN_MODE | Open and upload a file. | | FILE_OPEN_MODE | Open and upload a file. |
| FILE_OPEN_MULTIPLE_MODE | Open and upload multiple files. | | FILE_OPEN_MULTIPLE_MODE | Open and upload multiple files. |
| FILE_OPEN_FOLDER_MODE | Open and upload a folder.| | FILE_OPEN_FOLDER_MODE | Open and upload a folder. |
| FILE_SAVE_MODE | Save a file. | | FILE_SAVE_MODE | Save a file. |
## WebController ## WebController
...@@ -221,15 +221,15 @@ Indicates whether a specific number of steps forward or backward can be performe ...@@ -221,15 +221,15 @@ Indicates whether a specific number of steps forward or backward can be performe
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | 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.| | 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 - Return value
| Type | Description | | Type | Description |
| ------- | --------- | | ------- | ---------------------------------------- |
| boolean | Whether to go forward or backward from the current page.| | boolean | Whether to go forward or backward from the current page. |
### backward ### backward
...@@ -245,9 +245,9 @@ Deletes a specific application JavaScript object that is registered with the win ...@@ -245,9 +245,9 @@ Deletes a specific application JavaScript object that is registered with the win
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | 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 | 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 ### forward
...@@ -263,15 +263,15 @@ Obtains the element type of the area being clicked. ...@@ -263,15 +263,15 @@ Obtains the element type of the area being clicked.
- HitTestType enums - HitTestType enums
| Name | Description | | Name | Description |
| ------------- | ------------------------ | | ------------- | ---------------------------------------- |
| EditText | Editable area. | | EditText | Editable area. |
| Email | Email address. | | Email | Email address. |
| HttpAnchor | Hyperlink where **src** is **http**. | | HttpAnchor | Hyperlink where **src** is **http**. |
| HttpAnchorImg | Image with a hyperlink, where **src** is **http**.| | HttpAnchorImg | Image with a hyperlink, where **src** is **http**. |
| Img | HTML::img tag. | | Img | HTML::img tag. |
| Map | Geographical address. | | Map | Geographical address. |
| Unknown | Unknown content. | | Unknown | Unknown content. |
### loadData ### loadData
...@@ -285,13 +285,13 @@ If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be proces ...@@ -285,13 +285,13 @@ If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be proces
- options - options
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---------- | ------ | ---- | ---- | ---------------------------------------- | | ---------- | ------ | --------- | ------------- | ---------------------------------------- |
| data | string | Yes | - | Character string obtained after being Base64 or URL encoded. | | data | string | Yes | - | Character string obtained after being Base64 or URL encoded. |
| mimeType | string | Yes | - | Media type (MIME). | | mimeType | string | Yes | - | Media type (MIME). |
| encoding | string | Yes | - | Encoding type, which can be Base64 or URL. | | encoding | string | Yes | - | Encoding type, which can be Base64 or URL. |
| baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\<Web>** component to **window.origin**.| | baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\<Web>** 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.| | 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 ### loadUrl
...@@ -305,10 +305,10 @@ The object injected through **registerJavaScriptProxy** is still valid on a new ...@@ -305,10 +305,10 @@ The object injected through **registerJavaScriptProxy** is still valid on a new
- options - options
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------- | ------------------------------ | ---- | ---- | -------------- | | ------- | -------------------------- | --------- | ------------- | ---------------------------------------- |
| url | string | Yes | - | URL to load. | | url | string | Yes | - | URL to load. |
| headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL.| | headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL. |
### onActive ### onActive
...@@ -336,11 +336,11 @@ Injects a JavaScript object into the window and invokes the methods of the objec ...@@ -336,11 +336,11 @@ Injects a JavaScript object into the window and invokes the methods of the objec
- options - options
| Name | Type | Mandatory | Default Value | Description | | 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.| | 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.| | 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\<string\> | Yes | - | Methods of the JavaScript object to be registered at the application side. | | methodList | Array\<string\> | Yes | - | Methods of the JavaScript object to be registered at the application side. |
### runJavaScript ### runJavaScript
...@@ -350,10 +350,10 @@ Asynchronously executes a JavaScript script. This API uses a callback to return ...@@ -350,10 +350,10 @@ Asynchronously executes a JavaScript script. This API uses a callback to return
- options - options
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | ------------------------ | ---- | ---- | ---------------------------------------- | | -------- | ------------------------ | --------- | ------------- | ---------------------------------------- |
| script | string | Yes | - | JavaScript script. | | 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.| | 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 ### stop
...@@ -373,9 +373,9 @@ getCookieManager(): WebCookie ...@@ -373,9 +373,9 @@ getCookieManager(): WebCookie
Obtains the cookie management object of the **\<Web>** component. Obtains the cookie management object of the **\<Web>** component.
- Return value - 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 ## WebCookie
Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management. Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
### setCookie ### setCookie
...@@ -385,23 +385,23 @@ Sets the cookie. This API is synchronous. ...@@ -385,23 +385,23 @@ Sets the cookie. This API is synchronous.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | ---- | ---- | ----------------- | | ----- | ------ | --------- | ------------- | --------------------------- |
| url | string | Yes | - | URL of the cookie to set.| | url | string | Yes | - | URL of the cookie to set. |
| value | string | Yes | - | Value of the cookie to set. | | value | string | Yes | - | Value of the cookie to set. |
- Return value - 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. |
### saveCookieSync ### saveCookieSync
saveCookieSync(): boolean saveCookieSync(): boolean
Saves this cookie in the memory to the disk. This API is synchronous. Saves this cookie in the memory to the disk. This API is synchronous.
- Return value - Return value
| Type | Description | | Type | Description |
| ------- | -------------------- | | ------- | ----------------------------- |
| boolean | Returns the operation result.| | boolean | Returns the operation result. |
## Example ## Example
```ts ```ts
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 62e0baeb
...@@ -15,24 +15,24 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb ...@@ -15,24 +15,24 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | --------- | ------------ | --------- | ---------------------------------------- |
| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**| | fingers | number | No | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1** |
| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**| | direction | PanDirection | No | Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All** |
| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>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.| | distance | number | No | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>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 ## PanDirection enums
| Name| Description| | Name | Description |
| -------- | -------- | | ---------- | --------------------- |
| All | All directions.| | All | All directions. |
| Horizontal | Horizontal panning.| | Horizontal | Horizontal panning. |
| Vertical | Vertical panning.| | Vertical | Vertical panning. |
| Left | Panning to the left.| | Left | Panning to the left. |
| Right | Panning to the right.| | Right | Panning to the right. |
| Up | Panning up.| | Up | Panning up. |
| Down | Panning down.| | Down | Panning down. |
| None | Panning disabled.| | None | Panning disabled. |
## PanGestureOptions ## PanGestureOptions
...@@ -47,21 +47,21 @@ See the **PanGesture** parameters. ...@@ -47,21 +47,21 @@ See the **PanGesture** parameters.
**APIs** **APIs**
| Name| Description| | Name | Description |
| -------- | -------- | | --------------------------------- | --------------------------- |
| setDirection(value: PanDirection) | Sets the direction.| | setDirection(value: PanDirection) | Sets the direction. |
| setDistance(value: number) | Sets the distance.| | setDistance(value: number) | Sets the distance. |
| setFingers(value: number) | Sets the number of fingers.| | setFingers(value: number) | Sets the number of fingers. |
## Events ## Events
| Name| Description| | Name | Description |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a pan gesture is recognized.| | onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a pan gesture is recognized. |
| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the pan gesture status is updated.| | onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the pan gesture status is updated. |
| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift.| | onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift. |
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized.| | onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
## Example ## Example
...@@ -115,13 +115,3 @@ struct PanGestureExample { ...@@ -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)
en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 62e0baeb
...@@ -13,20 +13,20 @@ PinchGesture(value?: { fingers?: number, distance?: number }) ...@@ -13,20 +13,20 @@ PinchGesture(value?: { fingers?: number, distance?: number })
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | ------ | --------- | ---------------------------------------- |
| fingers | number | No| Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2**| | fingers | number | No | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2** |
| distance | number | No| Minimum recognition distance, in vp.<br>Default value: **3**| | distance | number | No | Minimum recognition distance, in vp.<br>Default value: **3** |
## Events ## Events
| Name| Description| | Name | Description |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized.| | onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized. |
| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen.| | onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen. |
| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift.| | onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift. |
| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized.| | onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 62e0baeb
...@@ -13,27 +13,27 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num ...@@ -13,27 +13,27 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | --------- | -------------- | --------- | ---------------------------------------- |
| fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1**| | fingers | number | No | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1** |
| direction | SwipeDirection | No| Swipe direction.<br>Default value: **SwipeDirection.All**| | direction | SwipeDirection | No | Swipe direction.<br>Default value: **SwipeDirection.All** |
| speed | number | No| Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100**| | speed | number | No | Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100** |
## SwipeDirection ## SwipeDirection
| Name| Description| | Name | Description |
| -------- | -------- | | ---------- | --------------------- |
| All | All directions.| | All | All directions. |
| Horizontal | Horizontal direction. | | Horizontal | Horizontal direction. |
| Vertical | Vertical direction. | | Vertical | Vertical direction. |
| None | Swiping disabled.| | None | Swiping disabled. |
## Events ## Events
| Name| Description| | Name | Description |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a swipe gesture is recognized.| | onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a swipe gesture is recognized. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 62e0baeb
...@@ -24,7 +24,7 @@ Create a badge. ...@@ -24,7 +24,7 @@ Create a badge.
| count | number | Yes| - | Number of notifications.| | count | number | Yes| - | Number of notifications.|
| position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| | 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.| | 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}) **Method 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
...@@ -36,7 +36,7 @@ Creates a badge based on the given string. ...@@ -36,7 +36,7 @@ Creates a badge based on the given string.
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| value | string | Yes| - | Prompt content.| | value | string | Yes| - | Prompt content.|
| position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| | 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 ## BadgePosition
...@@ -47,12 +47,13 @@ Creates a badge based on the given string. ...@@ -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.| | Left | The badge is vertically centered on the left of the parent component.|
## BadgeStyle ## BadgeStyle
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory| Default Value | Description |
| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color.White | Font color. | | ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- |
| fontSize | number&nbsp;\|&nbsp;string | No| 10 | Font size. | | color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. |
| badgeSize | number&nbsp;\|&nbsp;string | Yes| - | Badge size.| | fontSize | number \| string | No | 10 | Font size, in vp. |
| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color.Red | Badge color.| | 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 ## Example
......
en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ 62e0baeb
...@@ -23,30 +23,30 @@ Shape(value?: PixelMap) ...@@ -23,30 +23,30 @@ Shape(value?: PixelMap)
**Parameters** **Parameters**
| Name| Type| Mandatory| Default Value| Description| | 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.| | 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 ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description| | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | ----------------- | ---------------------------------------- | ------------------------------- | --------- | ---------------------------------------- |
| viewPort | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | { x:0, y:0, width:0, height:0 } | No| View port of the shape.| | viewPort | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | { 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.| | 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.| | 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.| | stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | No | Stroke color. |
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.| | strokeDashArray | Array&lt;Length&gt; | [] | No | Stroke dash. |
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| | 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.| | 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.| | 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.| | 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.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource) | 1 | No | Stroke opacity. |
| strokeWidth | number \| string | 1 | No| Stroke width.| | strokeWidth | number \| string | 1 | No | Stroke width. |
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| | antiAlias | boolean | true | No | Whether anti-aliasing is enabled. |
| mesh<sup>8+</sup> | Array&lt;number&gt;,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.| | mesh<sup>8+</sup> | Array&lt;number&gt;,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 ## Example
......
en/application-dev/ui/ts-framework-directory.md
浏览文件 @ 62e0baeb
# Directory Structure # 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) ![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: 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.
en/application-dev/website.md
浏览文件 @ 62e0baeb
...@@ -243,8 +243,8 @@ ...@@ -243,8 +243,8 @@
- [Distributed Data Object Development](database/database-distributedobject-guidelines.md) - [Distributed Data Object Development](database/database-distributedobject-guidelines.md)
- Task Management - Task Management
- Background Task Management - Background Task Management
- [Background Task Management Overview](background-task-management/background-task-overview.md) - [Background Task Management Overview](task-management/background-task-overview.md)
- [Background Task Management Development](background-task-management/background-task-dev-guide.md) - [Background Task Management Development](task-management/background-task-dev-guide.md)
- Work Scheduler - Work Scheduler
- [Work Scheduler Overview](task-management/work-scheduler-overview.md) - [Work Scheduler Overview](task-management/work-scheduler-overview.md)
- [Work Scheduler Development](task-management/work-scheduler-dev-guide.md) - [Work Scheduler Development](task-management/work-scheduler-dev-guide.md)
......
en/release-notes/api-change/v3.1-Release/changelog-v3.1-release.md 0 → 100644
浏览文件 @ 62e0baeb
# 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.
en/release-notes/api-change/v3.1-Release/readme.md
浏览文件 @ 62e0baeb
...@@ -4,3 +4,4 @@ This directory records the API changes in OpenHarmony 3.1 Release over OpenHarmo ...@@ -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) - [JS API Differences](js-apidiff-v3.1-release.md)
- [Native API Differences](native-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)
en/website.md
浏览文件 @ 62e0baeb
...@@ -52,6 +52,7 @@ ...@@ -52,6 +52,7 @@
- [User IAM subsystem](release-notes/api-change/v3.1-Release/js-apidiff-user-authentication.md) - [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) - [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) - [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 - Contribution
- [How to Contribute](contribute/how-to-contribute.md) - [How to Contribute](contribute/how-to-contribute.md)
- [Code of Conduct](contribute/code-of-conduct.md) - [Code of Conduct](contribute/code-of-conduct.md)
......
zh-cn/application-dev/Readme-CN.md
浏览文件 @ 62e0baeb
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
- [了解OpenHarmony开源项目](../OpenHarmony-Overview_zh.md) - [了解OpenHarmony开源项目](../OpenHarmony-Overview_zh.md)
- [术语](../glossary.md) - [术语](../glossary.md)
- [版本说明](../release-notes/Readme.md) - [版本说明](../release-notes/Readme.md)
- 快速开始 - 入门
- 快速入门 - 快速入门
- [开发准备](quick-start/start-overview.md) - [开发准备](quick-start/start-overview.md)
- [使用eTS语言开发(传统代码方式)](quick-start/start-with-ets.md) - [使用eTS语言开发(传统代码方式)](quick-start/start-with-ets.md)
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
- 开发基础知识 - 开发基础知识
- [应用包结构说明(FA模型)](quick-start/package-structure.md) - [应用包结构说明(FA模型)](quick-start/package-structure.md)
- [应用包结构说明(Stage模型)](quick-start/stage-structure.md) - [应用包结构说明(Stage模型)](quick-start/stage-structure.md)
- [资源文件的分类](quick-start/basic-resource-file-categories.md)
- [SysCap说明](quick-start/syscap.md) - [SysCap说明](quick-start/syscap.md)
- 开发 - 开发
- [Ability开发](ability/Readme-CN.md) - [Ability开发](ability/Readme-CN.md)
......
zh-cn/application-dev/application-dev-guide-for-gitee.md
浏览文件 @ 62e0baeb
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
在应用开发的文档中，您可以获取到如下几方面的内容： 在应用开发的文档中，您可以获取到如下几方面的内容：
### 快速开始 ### 入门
[快速开始](quick-start/Readme-CN.md)可以帮助开发者了解应用开发的基本方法。 [入门](quick-start/Readme-CN.md)可以帮助开发者了解应用开发的基本方法。
这一部分包含了快速构建首个应用的快速入门，以及开发OpenHarmony应用所必备的基础知识。 这一部分包含了快速构建首个应用的快速入门，以及开发OpenHarmony应用所必备的基础知识。
......
zh-cn/application-dev/application-dev-guide.md
浏览文件 @ 62e0baeb
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
在应用开发的文档中，您可以获取到如下几方面的内容： 在应用开发的文档中，您可以获取到如下几方面的内容：
### 快速开始 ### 入门
[快速开始](quick-start/start-overview.md)可以帮助开发者了解应用开发的基本方法。 [入门](quick-start/start-overview.md)可以帮助开发者了解应用开发的基本方法。
这一部分包含了快速构建首个应用的快速入门，以及开发OpenHarmony应用所必备的基础知识。 这一部分包含了快速构建首个应用的快速入门，以及开发OpenHarmony应用所必备的基础知识。
......
zh-cn/application-dev/notification/notification-guidelines.md
浏览文件 @ 62e0baeb
...@@ -118,7 +118,7 @@ var subscriber = { ...@@ -118,7 +118,7 @@ var subscriber = {
}, },
}; };
Notification.subscribe(subscriber, (err, data) => { // callback形式调用异步接口 Notification.subscribe(subscriber, (err) => { // callback形式调用异步接口
if (err.code) { if (err.code) {
console.error('===>failed to subscribe because ' + JSON.stringify(err)); console.error('===>failed to subscribe because ' + JSON.stringify(err));
return; return;
...@@ -154,7 +154,7 @@ var notificationRequest = { ...@@ -154,7 +154,7 @@ var notificationRequest = {
} }
//通知发送 //通知发送
Notification.publish(notificationRequest) .then((data) => { Notification.publish(notificationRequest) .then(() => {
console.info('===>publish promise success req.id : ' + notificationRequest.id); console.info('===>publish promise success req.id : ' + notificationRequest.id);
}).catch((err) => { }).catch((err) => {
console.error('===>publish promise failed because ' + JSON.stringify(err)); console.error('===>publish promise failed because ' + JSON.stringify(err));
...@@ -223,7 +223,7 @@ var notificationRequest = { ...@@ -223,7 +223,7 @@ var notificationRequest = {
} }
//通知发送 //通知发送
Notification.publish(notificationRequest) .then((data) => { Notification.publish(notificationRequest) .then(() => {
console.info('===>publish promise success req.id : ' + notificationRequest.id); console.info('===>publish promise success req.id : ' + notificationRequest.id);
}).catch((err) => { }).catch((err) => {
console.error('===>publish promise failed because ' + JSON.stringify(err)); console.error('===>publish promise failed because ' + JSON.stringify(err));
...@@ -244,8 +244,3 @@ function cancelCallback(err) { ...@@ -244,8 +244,3 @@ function cancelCallback(err) {
Notification.cancel(1, "label", cancelCallback) Notification.cancel(1, "label", cancelCallback)
``` ```
## 相关实例
针对通知开发，有以下相关可供参考：
- [`Notification`：通知（eTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/common/Notification)
zh-cn/application-dev/quick-start/Readme-CN.md
浏览文件 @ 62e0baeb
# 快速开始 # 入门
- 快速入门 - 快速入门
- [开发准备](start-overview.md) - [开发准备](start-overview.md)
......
zh-cn/application-dev/reference/apis/Readme-CN.md
浏览文件 @ 62e0baeb
...@@ -68,6 +68,9 @@ ...@@ -68,6 +68,9 @@
- bundle/[HapModuleInfo (HapModuleInfo)](js-apis-bundle-HapModuleInfo.md) - bundle/[HapModuleInfo (HapModuleInfo)](js-apis-bundle-HapModuleInfo.md)
- bundle/[Metadata (Metadata)](js-apis-bundle-Metadata.md) - bundle/[Metadata (Metadata)](js-apis-bundle-Metadata.md)
- bundle/[ModuleInfo (ModuleInfo)](js-apis-bundle-ModuleInfo.md) - bundle/[ModuleInfo (ModuleInfo)](js-apis-bundle-ModuleInfo.md)
- 应用管理
- [@system.package (应用管理)](js-apis-system-package.md)
- UI界面 - UI界面
- [@ohos.animator (动画)](js-apis-animator.md) - [@ohos.animator (动画)](js-apis-animator.md)
...@@ -234,7 +237,6 @@ ...@@ -234,7 +237,6 @@
- [@system.mediaquery (媒体查询)](js-apis-system-mediaquery.md) - [@system.mediaquery (媒体查询)](js-apis-system-mediaquery.md)
- [@system.network (网络状态)](js-apis-system-network.md) - [@system.network (网络状态)](js-apis-system-network.md)
- [@system.notification (通知消息)](js-apis-system-notification.md) - [@system.notification (通知消息)](js-apis-system-notification.md)
- [@system.package (应用管理)](js-apis-system-package.md)
- [@system.prompt (弹窗)](js-apis-system-prompt.md) - [@system.prompt (弹窗)](js-apis-system-prompt.md)
- [@system.request (上传下载)](js-apis-system-request.md) - [@system.request (上传下载)](js-apis-system-request.md)
- [@system.router (页面路由)](js-apis-system-router.md) - [@system.router (页面路由)](js-apis-system-router.md)
......
zh-cn/application-dev/reference/apis/js-apis-featureAbility.md
浏览文件 @ 62e0baeb
...@@ -36,7 +36,7 @@ startAbility(parameter: StartAbilityParameter, callback: AsyncCallback\<number>) ...@@ -36,7 +36,7 @@ startAbility(parameter: StartAbilityParameter, callback: AsyncCallback\<number>)
import featureAbility from '@ohos.ability.featureAbility' import featureAbility from '@ohos.ability.featureAbility'
import wantConstant from '@ohos.ability.wantConstant' import wantConstant from '@ohos.ability.wantConstant'
featureAbility.startAbility( featureAbility.startAbility(
{ {
want: want:
{ {
action: "", action: "",
...@@ -49,6 +49,9 @@ featureAbility.startAbility( ...@@ -49,6 +49,9 @@ featureAbility.startAbility(
uri: "" uri: ""
}, },
}, },
(err, data) => {
console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data))
}
); );
``` ```
...@@ -262,6 +265,9 @@ featureAbility.terminateSelfWithResult( ...@@ -262,6 +265,9 @@ featureAbility.terminateSelfWithResult(
} }
}, },
}, },
(err) => {
console.info("err: " + JSON.stringify(err))
}
); );
``` ```
...@@ -340,7 +346,11 @@ hasWindowFocus(callback: AsyncCallback\<boolean>): void ...@@ -340,7 +346,11 @@ hasWindowFocus(callback: AsyncCallback\<boolean>): void
```javascript ```javascript
import featureAbility from '@ohos.ability.featureAbility'; 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\<Want>): void ...@@ -388,7 +398,11 @@ getWant(callback: AsyncCallback\<Want>): void
```javascript ```javascript
import featureAbility from '@ohos.ability.featureAbility'; 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>): void ...@@ -458,7 +472,11 @@ terminateSelf(callback: AsyncCallback\<void>): void
```javascript ```javascript
import featureAbility from '@ohos.ability.featureAbility'; 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( ...@@ -595,8 +613,8 @@ var connId = featureAbility.connectAbility(
}, },
); );
var result = featureAbility.disconnectAbility(connId, var result = featureAbility.disconnectAbility(connId,
(error,data) => { (error) => {
console.log('featureAbilityTest DisConnectJsSameBundleName result errCode : ' + error.code + " data: " + data) console.log('featureAbilityTest DisConnectJsSameBundleName result errCode : ' + error.code)
}, },
); );
``` ```
...@@ -670,7 +688,11 @@ getWindow(callback: AsyncCallback\<window.Window>): void ...@@ -670,7 +688,11 @@ getWindow(callback: AsyncCallback\<window.Window>): void
**示例：** **示例：**
```javascript ```javascript
featureAbility.getWindow() featureAbility.getWindow(
(err, data) => {
console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data))
}
)
``` ```
## featureAbility.getWindow<sup>7+</sup> ## featureAbility.getWindow<sup>7+</sup>
......
zh-cn/application-dev/reference/apis/js-apis-inputmethod.md
浏览文件 @ 62e0baeb
# 输入法框架 # 输入法框架
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** 本模块提供对输入法框架的管理，包括隐藏输入法、查询已安装的输入法列表和拉起选择输入法弹窗。
> 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
> **说明：**
>
> 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
## 导入模块 ## 导入模块
``` ```js
import inputMethod from '@ohos.inputmethod'; import inputMethod from '@ohos.inputmethod';
``` ```
## inputMethod<sup>6+</sup> ## 常量
常量值。 常量值。
**系统能力**：以下各项对应的系统能力均为SystemCapability.Miscservices.InputMethodFramework **系统能力：** SystemCapability.Miscservices.InputMethodFramework
| 名称 | 参数类型 | 可读 | 可写 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| MAX_TYPE_NUM | number | 是 | 否 | 可支持的最大输入法个数。 |
| 名称 | 参数类型 | 常量值 | 说明 |
| -------- | -------- | ---------- | -------- |
| MAX_TYPE_NUM | number | 128 | 可支持的最大输入法个数。 |
## InputMethodProperty<sup>6+</sup> ## InputMethodProperty
输入法应用属性。 输入法应用属性。
**系统能力**：以下各项对应的系统能力均为SystemCapability.Miscservices.InputMethodFramework **系统能力：** SystemCapability.Miscservices.InputMethodFramework
| 名称 | 参数类型 | 可读 | 可写 | 说明 | | 名称 | 参数类型 | 可读 | 可写 | 说明 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| packageName | string | 是 | 否 | 包名。 | | packageName | string | 是 | 否 | 输入法包名。 |
| methodId | string | 是 | 否 | Ability名。 | | methodId | string | 是 | 否 | 输入法唯一标识。 |
## inputMethod.getInputMethodController ## inputMethod.getInputMethodController
getInputMethodController(): InputMethodController getInputMethodController(): InputMethodController
获取客户端实例[InputMethodController](#InputMethodController)。 获取客户端实例[InputMethodController](#inputmethodcontroller)。
**系统能力**：SystemCapability.Miscservices.InputMethodFramework **系统能力：** SystemCapability.Miscservices.InputMethodFramework
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| [InputMethodController](#InputMethodController) | 回调返回当前客户端实例。 | | [InputMethodController](#inputmethodcontroller) | 返回当前客户端实例。 |
**示例：** **示例：**
```js ```js
var InputMethodController = inputMethod.getInputMethodController(); let inputMethodController = inputMethod.getInputMethodController();
``` ```
## inputMethod.getInputMethodSetting<sup>6+</sup> ## inputMethod.getInputMethodSetting
getInputMethodSetting(): InputMethodSetting getInputMethodSetting(): InputMethodSetting
获取客户端设置实例[InputMethodSetting](#InputMethodSetting)。 获取客户端设置实例[InputMethodSetting](#inputmethodsetting)。
**系统能力**： SystemCapability.Miscservices.InputMethodFramework **系统能力：** SystemCapability.Miscservices.InputMethodFramework
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ----------------------------------------- | ---------------------------- | | ----------------------------------------- | ------------------------ |
| [InputMethodSetting](#InputMethodSetting) | 回调返回当前客户端设置实例。 | | [InputMethodSetting](#inputmethodsetting) | 返回当前客户端设置实例。 |
**示例：** **示例：**
```js ```js
var InputMethodSetting = inputMethod.getInputMethodSetting(); let inputMethodSetting = inputMethod.getInputMethodSetting();
``` ```
## InputMethodController ## InputMethodController
下列API示例中都需使用[getInputMethodController](#getInputMethodController)回调获取到InputMethodController实例，再通过此实例调用对应方法。 下列API示例中都需使用[getInputMethodController](#inputmethodgetinputmethodcontroller)回调获取到InputMethodController实例，再通过此实例调用对应方法。
### stopInput ### stopInput
stopInput(callback: AsyncCallback&lt;boolean&gt;): void stopInput(callback: AsyncCallback&lt;boolean&gt;): void
隐藏输入法。 结束输入法会话。使用callback异步回调。
**系统能力**：SystemCapability.Miscservices.InputMethodFramework **系统能力：** SystemCapability.Miscservices.InputMethodFramework
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;boolean&gt; | 是 | 返回输入法隐藏是否成功。 | | callback | AsyncCallback&lt;boolean&gt; | 是 | 回调函数，返回结束输入法会话是否成功的结果。true表示结束输入法会话成功；false表示结束输入法会话失败。 |
**示例：** **示例：**
```js ```js
InputMethodController.stopInput((error)=>{ inputMethodController.stopInput((error, result) => {
console.info('stopInput'); 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
stopInput(): Promise&lt;boolean&gt; stopInput(): Promise&lt;boolean&gt;
隐藏输入法。 结束输入法会话。使用Promise异步回调。
**系统能力**： SystemCapability.Miscservices.InputMethodFramework **系统能力：** SystemCapability.Miscservices.InputMethodFramework
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| Promise&lt;boolean&gt; | 返回输入法隐藏是否成功。 | | Promise&lt;boolean&gt; | Promise对象，返回结束输入法会话是否成功的结果。true表示结束输入法会话成功；false表示结束输入法会话失败。 |
**示例：** **示例：**
```js ```js
var isSuccess = InputMethodController.stopInput(); inputMethodController.stopInput().then((result) => {
console.info('stopInput isSuccess = ' + isSuccess); if (result) {
console.info('Succeeded in stopping inputmethod session.');
} else {
console.error('Failed to stop inputmethod session');
}
})
``` ```
## InputMethodSetting<sup>6+</sup> ## InputMethodSetting
下列API示例中都需使用[getInputMethodSetting](#getInputMethodSetting)回调获取到InputMethodSetting实例，再通过此实例调用对应方法。 下列API示例中都需使用[getInputMethodSetting](#inputmethodgetinputmethodsetting)回调获取到InputMethodSetting实例，再通过此实例调用对应方法。
### listInputMethod ### listInputMethod
listInputMethod(callback: AsyncCallback&lt;Array&lt;InputMethodProperty&gt;&gt;): void listInputMethod(callback: AsyncCallback&lt;Array&lt;InputMethodProperty&gt;&gt;): void
查询已安装的输入法列表。 查询已安装的输入法列表。使用callback异步回调。
**系统能力**： SystemCapability.Miscservices.InputMethodFramework **系统能力：** SystemCapability.Miscservices.InputMethodFramework
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------------------------------------------------- | ---- | ---------------------- | | -------- | -------------------------------------------------- | ---- | ---------------------- |
| callback | Array<[InputMethodProperty](#InputMethodProperty)> | 是 | 返回已安装输入法列表。 | | callback | Array<[InputMethodProperty](#inputmethodproperty)> | 是 | 回调函数，返回已安装的输入法列表。 |
**示例：** **示例：**
```js ```js
InputMethodSetting.listInputMethod((properties)=>{ inputMethodSetting.listInputMethod((err, data) => {
for (var i = 0;i < properties.length; i++) { if(err) {
var property = properties[i]; console.error('Failed to list inputmethods: ' + JSON.stringify(err));
console.info(property.packageName + "/" + property.methodId); return;
} }
}); console.log('Succeeded in listing inputmethods, data: ' + JSON.stringify(data));
});
``` ```
### listInputMethod ### listInputMethod
listInputMethod(): Promise&lt;Array&lt;InputMethodProperty&gt;&gt; listInputMethod(): Promise&lt;Array&lt;InputMethodProperty&gt;&gt;
查询已安装的输入法列表。 查询已安装的输入法列表。使用Promise异步回调。
**系统能力**： SystemCapability.Miscservices.InputMethodFramework **系统能力：** SystemCapability.Miscservices.InputMethodFramework
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ----------------------------------------------------------- | ---------------------- | | ----------------------------------------------------------- | ---------------------- |
| Promise<Array<[InputMethodProperty](#InputMethodProperty)>> | 返回已安装输入法列表。 | | Promise<Array<[InputMethodProperty](#inputmethodproperty)>> | Promise对象，返回已安装的输入法列表。|
**示例：** **示例：**
```js ```js
var properties = InputMethodSetting.listInputMethod(); inputMethodSetting.listInputMethod().then((data) => {
for (var i = 0;i < properties.length; i++) { console.info('Succeeded in listing inputMethod.');
var property = properties[i]; }).catch((err) => {
console.info(property.packageName + "/" + property.methodId); console.error('Failed to list inputMethod: ' + JSON.stringify(err));
} })
``` ```
### displayOptionalInputMethod ### displayOptionalInputMethod
displayOptionalInputMethod(callback: AsyncCallback&lt;void&gt;): void displayOptionalInputMethod(callback: AsyncCallback&lt;void&gt;): void
显示输入法选择对话框。 显示选择输入法弹窗。使用callback异步回调。
**系统能力**： SystemCapability.Miscservices.InputMethodFramework **系统能力：** SystemCapability.Miscservices.InputMethodFramework
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;void&gt; | 是 | 回调函数。 | | callback | AsyncCallback&lt;void&gt; | 是 | 回调函数。当选择输入法弹窗显示成功。err为undefined，否则为错误对象。 |
**示例：** **示例：**
```js ```js
InputMethodSetting.displayOptionalInputMethod(()=>{ inputMethodSetting.displayOptionalInputMethod((err) => {
console.info('displayOptionalInputMethod is called'); if (err) {
}); console.error('Failed to display optionalInputMethod:' + JSON.stringify(err));
return;
}
console.info('Succeeded in displaying optionalInputMethod.');
});
``` ```
### displayOptionalInputMethod ### displayOptionalInputMethod
displayOptionalInputMethod(): Promise&lt;void&gt; displayOptionalInputMethod(): Promise&lt;void&gt;
显示输入法选择对话框。 显示选择输入法弹窗。使用Promise异步回调。
**系统能力**： SystemCapability.Miscservices.InputMethodFramework **系统能力：** SystemCapability.Miscservices.InputMethodFramework
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| Promise&lt;void&gt; | 回调函数。 | | Promise&lt;void&gt; | 无返回结果的Promise对象。 |
**示例：** **示例：**
```js ```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
zh-cn/application-dev/reference/apis/js-apis-system-package.md
浏览文件 @ 62e0baeb
...@@ -3,8 +3,6 @@ ...@@ -3,8 +3,6 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> >
> - 从API Version 7 开始，该接口不再维护，推荐使用新接口[`@ohos.bundle`](js-apis-Bundle.md)。
>
> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 > - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
......
zh-cn/application-dev/reference/apis/js-apis-system-time.md
浏览文件 @ 62e0baeb
# 设置系统时间 # 设置系统时间、时区
本模块用来设置、获取当前系统时间，设置、获取当前系统日期和设置、获取当前系统时区。 本模块用来设置、获取当前系统时间、系统日期和系统时区。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
>
> 本模块首批接口从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 > 本模块首批接口从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
## 导入模块 ## 导入模块
```js
```
import systemTime from '@ohos.systemTime'; import systemTime from '@ohos.systemTime';
``` ```
## systemTime.setTime ## systemTime.setTime
setTime(time : number, callback : AsyncCallback&lt;void&gt;) : void setTime(time : number, callback : AsyncCallback&lt;void&gt;) : void
设置系统时间。 设置系统时间，使用callback异步回调。
**需要权限：** ohos.permission.SET_TIME **需要权限：** ohos.permission.SET_TIME
...@@ -26,31 +24,30 @@ setTime(time : number, callback : AsyncCallback&lt;void&gt;) : void ...@@ -26,31 +24,30 @@ setTime(time : number, callback : AsyncCallback&lt;void&gt;) : void
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| time | number | 是 | 目标时间戳（ms）。 | | time | number | 是 | 目标时间戳（ms）。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 回调函数，可以在回调函数中处理接口返回值。 | | callback | AsyncCallback&lt;void&gt; | 是 | 回调函数。 |
**示例：** **示例：**
```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 ## systemTime.setTime
setTime(time : number) : Promise&lt;void&gt; setTime(time : number) : Promise&lt;void&gt;
设置系统时间。 设置系统时间，使用Promise异步回调。
**需要权限：** ohos.permission.SET_TIME **需要权限：** ohos.permission.SET_TIME
...@@ -58,211 +55,204 @@ setTime(time : number) : Promise&lt;void&gt; ...@@ -58,211 +55,204 @@ setTime(time : number) : Promise&lt;void&gt;
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| time | number | 是 | 目标时间戳（ms）。 | | time | number | 是 | 目标时间戳（ms）。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| Promise&lt;void&gt; | 返回的异步回调函数。 | | Promise&lt;void&gt; | 无返回结果的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.getCurrentTime<sup>8+</sup> ## systemTime.getCurrentTime<sup>8+</sup>
getCurrentTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): void getCurrentTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): void
获取自 Unix 纪元以来经过的时间，使用callback形式返回结果。 获取自Unix纪元以来经过的时间，使用callback异步回调。
**系统能力：** SystemCapability.MiscServices.Time **系统能力：** SystemCapability.MiscServices.Time
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 |
| callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回自&nbsp;Unix&nbsp;纪元以来经过的时间。 | | callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回自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.getCurrentTime<sup>8+</sup> ## systemTime.getCurrentTime<sup>8+</sup>
getCurrentTime(isNano?: boolean): Promise&lt;number&gt; getCurrentTime(isNano?: boolean): Promise&lt;number&gt;
获取自 Unix 纪元以来经过的时间，使用Promise形式返回结果。 获取自Unix纪元以来经过的时间，使用Promise异步回调。
**系统能力：** SystemCapability.MiscServices.Time **系统能力：** SystemCapability.MiscServices.Time
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| Promise&lt;number&gt; | 以Promise形式返回结果，返回自&nbsp;Unix&nbsp;纪元以来经过的时间。 | | Promise&lt;number&gt; | 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.getRealActiveTime<sup>8+</sup> ## systemTime.getRealActiveTime<sup>8+</sup>
getRealActiveTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): void getRealActiveTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): void
获取自系统启动以来经过的时间，不包括深度睡眠时间，使用callback形式返回结果。 获取自系统启动以来经过的时间，不包括深度睡眠时间，使用callback异步回调。
**系统能力：** SystemCapability.MiscServices.Time **系统能力：** SystemCapability.MiscServices.Time
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 |
| callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回自系统启动以来经过的时间，但不包括深度睡眠时间。 | | callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回自系统启动以来经过的时间，但不包括深度睡眠时间。 |
**示例：** **示例：**
```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.getRealActiveTime<sup>8+</sup> ## systemTime.getRealActiveTime<sup>8+</sup>
getRealActiveTime(isNano?: boolean): Promise&lt;number&gt; getRealActiveTime(isNano?: boolean): Promise&lt;number&gt;
获取自系统启动以来经过的时间，不包括深度睡眠时间，使用Promise形式返回结果。 获取自系统启动以来经过的时间，不包括深度睡眠时间，使用Promise异步回调。
**系统能力：** SystemCapability.MiscServices.Time **系统能力：** SystemCapability.MiscServices.Time
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| Promise&lt;number&gt; | 以Promise形式返回结果，返回自系统启动以来经过的时间，但不包括深度睡眠时间。 | | Promise&lt;number&gt; | 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.getRealTime<sup>8+</sup> ## systemTime.getRealTime<sup>8+</sup>
getRealTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): void getRealTime(isNano?: boolean, callback: AsyncCallback&lt;number&gt;): void
获取自系统启动以来经过的时间，包括深度睡眠时间，使用callback形式返回结果。 获取自系统启动以来经过的时间，包括深度睡眠时间，使用callback异步回调。
**系统能力：** SystemCapability.MiscServices.Time **系统能力：** SystemCapability.MiscServices.Time
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 |
| callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回自系统启动以来经过的时间，包括深度睡眠时间。 | | callback | AsyncCallback&lt;number&gt; | 是 | 回调函数，返回自系统启动以来经过的时间，包括深度睡眠时间。 |
**示例：** **示例：**
```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.getRealTime<sup>8+</sup> ## systemTime.getRealTime<sup>8+</sup>
getRealTime(isNano?: boolean): Promise&lt;number&gt; getRealTime(isNano?: boolean): Promise&lt;number&gt;
获取自系统启动以来经过的时间，包括深度睡眠时间，使用Promise形式返回结果。 获取自系统启动以来经过的时间，包括深度睡眠时间，使用Promise异步回调。
**系统能力：** SystemCapability.MiscServices.Time **系统能力：** SystemCapability.MiscServices.Time
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 | | isNano | boolean | 否 | 如果是true，返回纳秒数；否则返回毫秒数。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| Promise&lt;number&gt; | 以Promise形式返回结果，返回自系统启动以来经过的时间，包括深度睡眠时间。 | | Promise&lt;number&gt; | 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 ## systemTime.setDate
setDate(date: Date, callback: AsyncCallback&lt;void&gt;): void setDate(date: Date, callback: AsyncCallback&lt;void&gt;): void
设置系统日期，使用callback形式返回结果。 设置系统日期，使用callback异步回调。
**需要权限：** ohos.permission.SET_TIME **需要权限：** ohos.permission.SET_TIME
...@@ -270,30 +260,29 @@ setDate(date: Date, callback: AsyncCallback&lt;void&gt;): void ...@@ -270,30 +260,29 @@ setDate(date: Date, callback: AsyncCallback&lt;void&gt;): void
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| date | Date | 是 | 目标日期。 | | date | Date | 是 | 目标日期。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 回调函数，可以在回调函数中处理接口返回值。 | | callback | AsyncCallback&lt;void&gt; | 是 | 回调函数。 |
**示例：** **示例：**
```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 ## systemTime.setDate
setDate(date: Date): Promise&lt;void&gt; setDate(date: Date): Promise&lt;void&gt;
设置系统日期，使用Promise形式返回结果。 设置系统日期，使用Promise异步回调。
**需要权限：** ohos.permission.SET_TIME **需要权限：** ohos.permission.SET_TIME
...@@ -301,85 +290,82 @@ setDate(date: Date): Promise&lt;void&gt; ...@@ -301,85 +290,82 @@ setDate(date: Date): Promise&lt;void&gt;
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| date | Date | 是 | 目标日期。 | | date | Date | 是 | 目标日期。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| Promise&lt;void&gt; | 返回的异步回调函数。 | | Promise&lt;void&gt; | 无返回结果的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.getDate<sup>8+</sup> ## systemTime.getDate<sup>8+</sup>
getDate(callback: AsyncCallback&lt;Date&gt;): void getDate(callback: AsyncCallback&lt;Date&gt;): void
获取当前系统日期，使用callback形式返回结果。 获取当前系统日期，使用callback异步回调。
**系统能力：** SystemCapability.MiscServices.Time **系统能力：** SystemCapability.MiscServices.Time
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;Date&gt; | 是 | 回调函数，返回当前系统日期。 | | callback | AsyncCallback&lt;Date&gt; | 是 | 回调函数，返回当前系统日期。 |
**示例：** **示例：**
```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.getDate<sup>8+</sup> ## systemTime.getDate<sup>8+</sup>
getDate(): Promise&lt;Date&gt; getDate(): Promise&lt;Date&gt;
获取当前系统日期，使用Promise形式返回结果。 获取当前系统日期，使用Promise异步回调。
**系统能力：** SystemCapability.MiscServices.Time **系统能力：** SystemCapability.MiscServices.Time
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| Promise&lt;Date&gt; | 以Promise形式返回结果，返回当前系统日期。 | | Promise&lt;Date&gt; | 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 ## systemTime.setTimezone
setTimezone(timezone: string, callback: AsyncCallback&lt;void&gt;): void setTimezone(timezone: string, callback: AsyncCallback&lt;void&gt;): void
设置系统时区。 设置系统时区，使用callback异步回调。
**需要权限：** ohos.permission.SET_TIME_ZONE **需要权限：** ohos.permission.SET_TIME_ZONE
...@@ -387,29 +373,28 @@ setTimezone(timezone: string, callback: AsyncCallback&lt;void&gt;): void ...@@ -387,29 +373,28 @@ setTimezone(timezone: string, callback: AsyncCallback&lt;void&gt;): void
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| timezone | string | 是 | 系统时区。 | | timezone | string | 是 | 系统时区。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 回调函数，可以在回调函数中处理接口返回值。 | | callback | AsyncCallback&lt;void&gt; | 是 | 回调函数。 |
**示例：** **示例：**
```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 ## systemTime.setTimezone
setTimezone(timezone: string): Promise&lt;void&gt; setTimezone(timezone: string): Promise&lt;void&gt;
设置系统时区。 设置系统时区，使用Promise异步回调。
**需要权限：** ohos.permission.SET_TIME_ZONE **需要权限：** ohos.permission.SET_TIME_ZONE
...@@ -417,74 +402,72 @@ setTimezone(timezone: string): Promise&lt;void&gt; ...@@ -417,74 +402,72 @@ setTimezone(timezone: string): Promise&lt;void&gt;
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| timezone | string | 是 | 系统时区。 | | timezone | string | 是 | 系统时区。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| Promise&lt;void&gt; | 返回的异步回调函数。 | | Promise&lt;void&gt; | 无返回结果的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.getTimezone<sup>8+</sup> ## systemTime.getTimezone<sup>8+</sup>
getTimezone(callback: AsyncCallback&lt;string&gt;): void getTimezone(callback: AsyncCallback&lt;string&gt;): void
获取系统时区，使用callback形式返回结果。 获取系统时区，使用callback异步回调。
**系统能力：** SystemCapability.MiscServices.Time **系统能力：** SystemCapability.MiscServices.Time
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;string&gt; | 是 | 回调函数，返回系统时区。 | | callback | AsyncCallback&lt;string&gt; | 是 | 回调函数，返回系统时区。 |
**示例：** **示例：**
```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.getTimezone<sup>8+</sup> ## systemTime.getTimezone<sup>8+</sup>
getTimezone(): Promise&lt;string&gt; getTimezone(): Promise&lt;string&gt;
获取系统时区，使用Promise形式返回结果。 获取系统时区，使用Promise异步回调。
**系统能力：** SystemCapability.MiscServices.Time **系统能力：** SystemCapability.MiscServices.Time
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | -------- | -------- |
| Promise&lt;string&gt; | 以Promise形式返回结果，返回系统时区。 | | Promise&lt;string&gt; | Promise对象，返回系统时区。 |
**示例：** **示例：**
```js ```js
systemTime.getTimezone().then((data) => { systemTime.getTimezone().then((data) => {
console.log(`systemTime.getTimezone success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting systemTimeZone. Data: ` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.getTimezone because ` + JSON.stringify(error)); console.error(`Failed to get systemTimeZone. Cause: ` + JSON.stringify(error));
}); });
``` ```
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md
浏览文件 @ 62e0baeb
# button # button
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。 按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
## 子组件 ## 子组件
...@@ -15,13 +15,13 @@ ...@@ -15,13 +15,13 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------- | ------- | ----- | ---- | ---------------------------------------- |
| type | string | - | 否 | 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：<br/>-&nbsp;capsule：胶囊型按钮，带圆角按钮，有背景色和文本；<br/>-&nbsp;circle：圆形按钮，支持放置图标；<br/>-&nbsp;text：文本按钮，仅包含文本显示；<br/>-&nbsp;arc：弧形按钮，仅支持智能穿戴；<br/>-&nbsp;download：下载按钮，额外增加下载进度条功能。 | | type | string | - | 否 | 不支持动态修改。默认展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定。该属性可选值包括：<br/>-&nbsp;capsule：胶囊型按钮，带圆角按钮，有背景色和文本；<br/>-&nbsp;circle：圆形按钮，支持放置图标；<br/>-&nbsp;text：文本按钮，仅包含文本显示；<br/>-&nbsp;arc：弧形按钮，仅支持智能穿戴；<br/>-&nbsp;download：下载按钮，额外增加下载进度条功能。 |
| value | string | - | 否 | button的文本值。 | | value | string | - | 否 | button的文本值。 |
| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 | | icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 |
| placement<sup>5+</sup> | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：<br/>-&nbsp;start：图标位于文本起始处；<br/>-&nbsp;end：图标位于文本结束处；<br/>-&nbsp;top：图标位于文本上方；<br/>-&nbsp;bottom：图标位于文本下方。 | | placement<sup>5+</sup> | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：<br/>-&nbsp;start：图标位于文本起始处；<br/>-&nbsp;end：图标位于文本结束处；<br/>-&nbsp;top：图标位于文本上方；<br/>-&nbsp;bottom：图标位于文本下方。 |
| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 | | waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 |
## 样式 ## 样式
...@@ -31,31 +31,31 @@ ...@@ -31,31 +31,31 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------------------- | --------------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#ff007dff<br/> | 否 | 按钮的文本颜色。 | | text-color | &lt;color&gt; | \#007dff<br/> | 否 | 按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px<br/> | 否 | 按钮的文本尺寸。 | | font-size | &lt;length&gt; | 16px<br/> | 否 | 按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 按钮的字体样式。 | | font-style | string | normal | 否 | 按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| icon-width | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;icon使用svg图源时必须设置该样式。 | | icon-width | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;icon使用svg图源时必须设置该样式。 | | icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 | | radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 |
### type设置为arc ### type设置为arc
除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom]外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom]外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#de0000 | 否 | 弧形按钮的文本颜色。 | | text-color | &lt;color&gt; | \#de0000 | 否 | 弧形按钮的文本颜色。 |
| font-size | &lt;length&gt; | 37.5px | 否 | 弧形按钮的文本尺寸。 | | font-size | &lt;length&gt; | 37.5px | 否 | 弧形按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | | allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
| font-style | string | normal | 否 | 弧形按钮的字体样式。 | | font-style | string | normal | 否 | 弧形按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件 ## 事件
...@@ -69,13 +69,13 @@ ...@@ -69,13 +69,13 @@
类型为download时，支持如下方法： 类型为download时，支持如下方法：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ----------- | ------------------------------ | ---------------------------------------- |
| setProgress | {&nbsp;progress:percent&nbsp;} | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;浮在进度条上的文字通过value值进行变更。 | | setProgress | {&nbsp;progress:percent&nbsp;} | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。<br/>浮在进度条上的文字通过value值进行变更。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="div-button"> <div class="div-button">
<button class="first" type="capsule" value="Capsule button"></button> <button class="first" type="capsule" value="Capsule button"></button>
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.div-button { .div-button {
flex-direction: column; flex-direction: column;
...@@ -130,8 +130,8 @@ ...@@ -130,8 +130,8 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
count: 5, count: 5,
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md
浏览文件 @ 62e0baeb
# chart # chart
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图表组件，用于呈现线形图、柱状图、量规图界面。 图表组件，用于呈现线形图、柱状图、量规图界面。
...@@ -19,114 +19,114 @@ ...@@ -19,114 +19,114 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------------------ | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：<br/>-&nbsp;bar：柱状图。<br/>-&nbsp;line：线形图。<br/>-&nbsp;gauge：量规图。<br/>-&nbsp;progress<sup>5+</sup>：进度类圆形图表。<br/>-&nbsp;loading<sup>5+</sup>：加载类圆形图表。<br/>-&nbsp;rainbow<sup>5+</sup>：占比类圆形图表。 | | type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：<br/>-&nbsp;bar：柱状图。<br/>-&nbsp;line：线形图。<br/>-&nbsp;gauge：量规图。<br/>-&nbsp;progress<sup>5+</sup>：进度类圆形图表。<br/>-&nbsp;loading<sup>5+</sup>：加载类圆形图表。<br/>-&nbsp;rainbow<sup>5+</sup>：占比类圆形图表。 |
| options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） | | options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） |
| datasets | Array&lt;ChartDataset&gt; | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 | | datasets | Array&lt;ChartDataset&gt; | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 |
| segments<sup>5+</sup> | DataSegment&nbsp;\|&nbsp;Array&lt;DataSegment&gt; | - | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用，<br/>Array&lt;DataSegment&gt;针对占比类图标使用，DataSegment最多9个。 | | segments<sup>5+</sup> | DataSegment&nbsp;\|&nbsp;Array&lt;DataSegment&gt; | - | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用，<br/>Array&lt;DataSegment&gt;针对占比类图标使用，DataSegment最多9个。 |
| effects<sup>5+</sup> | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | | effects<sup>5+</sup> | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 |
| animationduration<sup>6+</sup> | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 | | animationduration<sup>6+</sup> | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 |
**表1** ChartOptions **表1** ChartOptions
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ----------- | ---- | ---- | ---------------------------------------- |
| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | | xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 |
| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | | yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 |
| series | ChartSeries | - | 否 | 数据序列参数设置。可以设置1）线的样式，如线宽、是否平滑；2）设置线最前端位置白点的样式和大小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持。 | | series | ChartSeries | - | 否 | 仅线形图支持设置数据序列参数，可以设置的样式：<br>- 线的样式，如线宽、是否平滑。<br>- 设置线最前端位置白点的样式和大小。 |
**表2** ChartDataset **表2** ChartDataset
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | ---------------------------------------- | -------- | ---- | ---------------------- |
| strokeColor | &lt;color&gt; | \#ff6384 | 否 | 线条颜色。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持。 | | strokeColor | &lt;color&gt; | \#ff6384 | 否 | 仅线形图支持设置线条颜色。 |
| fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色。线形图表示填充的渐变颜色。 | | fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色。<br>线形图表示填充的渐变颜色。 |
| data | Array&lt;number&gt;&nbsp;\|&nbsp;Array&lt;Point&gt;<sup>5+</sup> | - | 是 | 设置绘制线或柱中的点集。 | | data | Array&lt;number&gt;&nbsp;\|&nbsp;Array&lt;Point&gt;<sup>5+</sup> | - | 是 | 设置绘制线或柱中的点集。 |
| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持。 | | gradient | boolean | false | 否 | 仅线形图支持设置是否显示填充渐变颜色。 |
**表3** ChartAxis **表3** ChartAxis
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------------- | -------- | ---- | ---------------------------------------- |
| min | number | 0 | 否 | 轴的最小值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持负数。 | | min | number | 0 | 否 | 轴的最小值，仅线形图支持负数。 |
| max | number | 100 | 否 | 轴的最大值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持负数。 | | max | number | 100 | 否 | 轴的最大值，仅线形图支持负数。 |
| axisTick | number | 10 | 否 | 轴显示的刻度数量。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。<br/>>&nbsp;在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 | | axisTick | number | 10 | 否 | 轴显示的刻度数量。仅支持1~20，且具体显示的效果与图的宽度所占的像素/（max-min）有关。<br/>在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 |
| display | boolean | false | 否 | 是否显示轴。 | | display | boolean | false | 否 | 是否显示轴。 |
| color | &lt;color&gt; | \#c0c0c0 | 否 | 轴颜色。 | | color | &lt;color&gt; | \#c0c0c0 | 否 | 轴颜色。 |
**表4** ChartSeries **表4** ChartSeries
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------- | ---- | ---- | -------------------- |
| lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 | | lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 |
| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 | | headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 |
| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 | | topPoint | PointStyle | - | 否 | 最高点的样式和大小。 |
| bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 | | bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 |
| loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 | | loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 |
**表5** ChartLineStyle **表5** ChartLineStyle
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | -------------- | ----- | ---- | ----- |
| width | &lt;length&gt; | 1px | 否 | 线宽设置。 | | width | &lt;length&gt; | 1px | 否 | 线宽设置。 |
| smooth | boolean | false | 否 | 是否平滑。 | | smooth | boolean | false | 否 | 是否平滑。 |
**表6** PointStyle **表6** PointStyle
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------- | -------- | ---- | ---------------------------------------- |
| shape | string | circle | 否 | 高亮点的形状。可选值为：<br/>-&nbsp;circle：圆形。<br/>-&nbsp;square：方形。<br/>-&nbsp;triangle：三角形。 | | shape | string | circle | 否 | 高亮点的形状。可选值为：<br/>-&nbsp;circle：圆形。<br/>-&nbsp;square：方形。<br/>-&nbsp;triangle：三角形。 |
| size | &lt;length&gt; | 5px | 否 | 高亮点的大小。 | | size | &lt;length&gt; | 5px | 否 | 高亮点的大小。 |
| strokeWidth | &lt;length&gt; | 1px | 否 | 边框宽度 | | strokeWidth | &lt;length&gt; | 1px | 否 | 边框宽度 |
| strokeColor | &lt;color&gt; | \#ff0000 | 否 | 边框颜色。 | | strokeColor | &lt;color&gt; | \#ff0000 | 否 | 边框颜色。 |
| fillColor | &lt;color&gt; | \#ff0000 | 否 | 填充颜色。 | | fillColor | &lt;color&gt; | \#ff0000 | 否 | 填充颜色。 |
**表7** ChartLoop **表7** ChartLoop
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------------- | ----- | ---- | ---------------------------------------- |
| margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 | | margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 |
| gradient | boolean | false | 否 | 是否需要渐变擦除。 | | gradient | boolean | false | 否 | 是否需要渐变擦除。 |
**表8** Point<sup>5+</sup> **表8** Point<sup>5+</sup>
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------ | ------------- | -------- | ---- | ---------------------------------------- |
| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 | | value | number | 0 | 是 | 表示绘制点的Y轴坐标。 |
| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 | | pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 |
| description | string | - | 否 | 表示当前点的注释内容。 | | description | string | - | 否 | 表示当前点的注释内容。 |
| textLocation | string | - | 否 | 可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。 | | textLocation | string | - | 否 | 可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。 |
| textColor | &lt;color&gt; | \#000000 | 否 | 表示注释文字的颜色。 | | textColor | &lt;color&gt; | \#000000 | 否 | 表示注释文字的颜色。 |
| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。“dashed，&nbsp;5，&nbsp;5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。 | | lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。“dashed，&nbsp;5，&nbsp;5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。 |
| lineColor | &lt;color&gt; | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 | | lineColor | &lt;color&gt; | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 |
**表9** DataSegment<sup>5+</sup> **表9** DataSegment<sup>5+</sup>
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------- | ------ | ---- | ---- | ---------------------------------------- |
| startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 | | startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 |
| endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。<br/>不设置startColor时，会使用系统默认预置的颜色数组。 | | endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。<br/>不设置startColor时，会使用系统默认预置的颜色数组。 |
| value | number | 0 | 是 | 占比数据的所占份额，最大100。 | | value | number | 0 | 是 | 占比数据的所占份额，最大100。 |
| name | string | - | 否 | 此类数据的名称。 | | name | string | - | 否 | 此类数据的名称。 |
| 数据组 | 浅色主题 | 深色主题 | | 数据组 | 浅色主题 | 深色主题 |
| -------- | -------- | -------- | | ---- | --------------------------- | --------------------------- |
| 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d | | 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d |
| 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b | | 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b |
| 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d | | 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d |
| 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 | | 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 |
| 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 | | 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 |
| 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 | | 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 |
| 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 | | 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 |
| 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d | | 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d |
| 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 | | 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 |
当类型为量规图时，还支持如下属性： 当类型为量规图时，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ------ | ---- | ---- | ---------------------- |
| percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 | | percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 |
## 样式 ## 样式
...@@ -135,18 +135,18 @@ ...@@ -135,18 +135,18 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------------ | -------------- | -------------------------- | ---- | ---------------------------------------- |
| stroke-width | &lt;length&gt; | 32px（量规）<br/>24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 | | stroke-width | &lt;length&gt; | 32px（量规）<br/>24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 |
| start-angle | &lt;deg&gt; | 240（量规）<br/>0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 | | start-angle | &lt;deg&gt; | 240（量规）<br/>0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 |
| total-angle | &lt;deg&gt; | 240（量规）<br/>360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 | | total-angle | &lt;deg&gt; | 240（量规）<br/>360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 |
| center-x | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持） | | center-x | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持） |
| center-y | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持） | | center-y | &lt;length&gt; | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持） |
| radius | &lt;length&gt; | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持） | | radius | &lt;length&gt; | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持） |
| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色。<br/>如：colors:&nbsp;\#ff0000,&nbsp;\#00ff00。（仅量规图支持） | | colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色。<br/>如：colors:&nbsp;\#ff0000,&nbsp;\#00ff00。（仅量规图支持） |
| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重。<br/>如：weights:&nbsp;2,&nbsp;2。（仅量规图支持） | | weights | Array | - | 否 | 量规组件刻度条每一个区段的权重。<br/>如：weights:&nbsp;2,&nbsp;2。（仅量规图支持） |
| font-family<sup>5+</sup> | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](../arkui-js/js-components-common-customizing-font.md)。 | | font-family<sup>5+</sup> | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](../arkui-js/js-components-common-customizing-font.md)。 |
| font-size<sup>5+</sup> | &lt;length&gt; | - | 否 | 表示绘制注释的字体的大小。 | | font-size<sup>5+</sup> | &lt;length&gt; | - | 否 | 表示绘制注释的字体的大小。 |
## 事件 ## 事件
...@@ -158,14 +158,14 @@ ...@@ -158,14 +158,14 @@
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： 除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 方法 | 参数 | 描述 | | 方法 | 参数 | 描述 |
| -------- | -------- | -------- | | ------ | ---------------------------------------- | ---------------------------------------- |
| append | {<br/>serial:&nbsp;number,&nbsp;//&nbsp;设置要更新的线形图数据下标<br/>data:&nbsp;Array&lt;number&gt;,&nbsp;//&nbsp;设置新增的数据<br/>} | 往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis&nbsp;min/max设置相关）。 | | append | {<br/>serial:&nbsp;number,&nbsp;<br/>data:&nbsp;Array&lt;number&gt;,&nbsp;<br/>} | 向已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。假设serial的值为index，使用data数据更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis&nbsp;min/max设置相关）。 |
## 示例 ## 示例
1. 线形图 1. 线形图
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<stack class="chart-region"> <stack class="chart-region">
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -202,7 +202,7 @@ ...@@ -202,7 +202,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -211,24 +211,24 @@ ...@@ -211,24 +211,24 @@
strokeColor: '#0081ff', strokeColor: '#0081ff',
fillColor: '#cce5ff', fillColor: '#cce5ff',
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], 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: { lineOps: {
xAxis: { xAxis: {
min: 0, min: 0,
max: 20, max: 20,
display: false, display: false
}, },
yAxis: { yAxis: {
min: 0, min: 0,
max: 1000, max: 1000,
display: false, display: false
}, },
series: { series: {
lineStyle: { lineStyle: {
width: "5px", width: "5px",
smooth: true, smooth: true
}, },
headPoint: { headPoint: {
shape: "circle", shape: "circle",
...@@ -236,14 +236,14 @@ ...@@ -236,14 +236,14 @@
strokeWidth: 5, strokeWidth: 5,
fillColor: '#ffffff', fillColor: '#ffffff',
strokeColor: '#007aff', strokeColor: '#007aff',
display: true, display: true
}, },
loop: { loop: {
margin: 2, margin: 2,
gradient: true, gradient: true
} }
} }
}, }
}, },
addData() { addData() {
this.$refs.linechart.append({ this.$refs.linechart.append({
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
![zh-cn_image_0000001173324843](figures/zh-cn_image_0000001173324843.png) ![zh-cn_image_0000001173324843](figures/zh-cn_image_0000001173324843.png)
2. 柱状图 2. 柱状图
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<stack class="data-region"> <stack class="data-region">
...@@ -267,7 +267,7 @@ ...@@ -267,7 +267,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -287,22 +287,22 @@ ...@@ -287,22 +287,22 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
barData: [ barData: [
{ {
fillColor: '#f07826', 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', 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', 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: { barOps: {
...@@ -310,14 +310,14 @@ ...@@ -310,14 +310,14 @@
min: 0, min: 0,
max: 20, max: 20,
display: false, display: false,
axisTick: 10, axisTick: 10
}, },
yAxis: { yAxis: {
min: 0, min: 0,
max: 1000, max: 1000,
display: false, display: false
}, }
}, }
} }
} }
``` ```
...@@ -325,7 +325,7 @@ ...@@ -325,7 +325,7 @@
![zh-cn_image_0000001173164929](figures/zh-cn_image_0000001173164929.png) ![zh-cn_image_0000001173164929](figures/zh-cn_image_0000001173164929.png)
3. 量规图 3. 量规图
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="gauge-region"> <div class="gauge-region">
...@@ -334,7 +334,7 @@ ...@@ -334,7 +334,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -352,3 +352,76 @@ ...@@ -352,3 +352,76 @@
``` ```
![zh-cn_image_0000001127125264](figures/zh-cn_image_0000001127125264.png) ![zh-cn_image_0000001127125264](figures/zh-cn_image_0000001127125264.png)
4. 进度类、加载类、占比类圆形图表
```html
<!-- xxx.hml -->
<div class="container">
<text class="text">progress Example</text>
<stack class="chart-region">
<chart class="" type="progress" segments="{{ progressdata }}"></chart>
</stack>
<text class="text">loading Example</text>
<stack class="chart-region">
<chart class="" type="loading" segments="{{ loadingdata }}"></chart>
</stack>
<text class="text">rainbow Example</text>
<stack class="chart-region">
<chart class="" type="rainbow" segments="{{ rainbowdata }}" effects="true" animationduration="5000"></chart>
</stack>
</div>
```
```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
zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
浏览文件 @ 62e0baeb
# image # image
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片组件，用来渲染展示图片。 图片组件，用来渲染展示图片。
...@@ -15,55 +15,55 @@ ...@@ -15,55 +15,55 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ---------------------------------------- |
| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。<br/>支持Base64字符串<sup>6+</sup>。格式为data:image/[png&nbsp;\|&nbsp;jpeg&nbsp;\|&nbsp;bmp&nbsp;\|&nbsp;webp];base64,&nbsp;[base64&nbsp;data],&nbsp;其中[base64&nbsp;data]为Base64字符串数据。<br/>支持dataability://的路径前缀，用于访问通过data&nbsp;ability提供的图片路径<sup>6+</sup>。 | | src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。<br/>- 支持Base64字符串<sup>6+</sup>。格式为data:image/[png&nbsp;\|&nbsp;jpeg&nbsp;\|&nbsp;bmp&nbsp;\|&nbsp;webp];base64,&nbsp;[base64&nbsp;data],&nbsp;其中[base64&nbsp;data]为Base64字符串数据。<br/>- 支持dataability://的路径前缀，用于访问通过data&nbsp;ability提供的图片路径<sup>6+</sup>。 |
| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 | | alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 |
## 样式 ## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下属性： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- |
| object-fit | string | cover | 否 | 设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式） | | object-fit | string | cover | 否 | 设置图片的缩放类型，不支持svg格式。可选值类型说明请见object-fit类型说明。 |
| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向。（不支持svg格式） | | match-text-direction | boolean | false | 否 | 图片是否跟随文字方向，不支持svg格式。 |
| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。 | | fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸，该属性为true时object-fit属性不生效，svg类型图源不支持该属性。 |
| object-position<sup>7+</sup> | string | 0px&nbsp;0px | 否 | 设置图片在组件内展示的位置。<br/>设置类型有两种：<br/>1.&nbsp;像素，单位px，示例&nbsp;15px&nbsp;15px&nbsp;代表X轴或者Y轴移动的位置<br/>2.&nbsp;字符，可选值：<br/>-&nbsp;left&nbsp;图片显示在组件左侧；<br/>-&nbsp;top&nbsp;图片显示在组件顶部位置；<br/>-&nbsp;right&nbsp;图片显示在组件右侧位置；<br/>-&nbsp;bottom 图片显示在组件底部位置。 | | object-position<sup>7+</sup> | string | 0px&nbsp;0px | 否 | 设置图片在组件内展示的位置。<br/>设置类型有两种：<br/>1.&nbsp;像素，单位px，示例&nbsp;15px&nbsp;15px&nbsp;代表X轴或者Y轴移动的位置<br/>2.&nbsp;字符，可选值：<br/>-&nbsp;left&nbsp;图片显示在组件左侧；<br/>-&nbsp;top&nbsp;图片显示在组件顶部位置；<br/>-&nbsp;right&nbsp;图片显示在组件右侧位置；<br/>-&nbsp;bottom 图片显示在组件底部位置。 |
**表1** object-fit 类型说明 **表1** object-fit 类型说明
| 类型 | 描述 | | 类型 | 描述 |
| -------- | -------- | | ---------- | ------------------------------------ |
| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 | | cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 |
| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 | | contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 |
| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 | | fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
| none | 保持原有尺寸进行居中显示。 | | none | 保持原有尺寸进行居中显示。 |
| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 | | scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 使用svg图片资源时： > 使用svg图片资源时：
> >
> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制； > - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制；
> >
> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域； > - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域；
> >
> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下： > - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下：
> >
> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分； > 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
> >
> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。 > 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | -------------- | ---------------------------------------- | ------------------------- |
| complete(Rich) | {&nbsp;width：width，&nbsp;height：height&nbsp;} | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 | | complete(Rich) | {<br>&nbsp;width：width，<br>&nbsp;height：height<br>&nbsp;} | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 |
| error(Rich) | {&nbsp;width：width，&nbsp;height：height&nbsp;} | 图片加载出现异常时触发该回调，异常时长宽为零。 | | error(Rich) | {<br>&nbsp;width：width，<br>&nbsp;height：height<br>&nbsp;} | 图片加载出现异常时触发该回调，异常时长宽为零。 |
## 方法 ## 方法
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;"> <image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;">
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
justify-content: center; justify-content: center;
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md
浏览文件 @ 62e0baeb
...@@ -92,34 +92,36 @@ ...@@ -92,34 +92,36 @@
## 示例 ## 示例
1. type为text 1. type为text
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="content"> <div class="content">
<input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send" <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
headericon="/common/search.svg" placeholder="Please input text" onchange="change" headericon="/common/search.svg" placeholder="Please input text" onchange="change"
onenterkeyclick="enterkeyClick"> onenterkeyclick="enterkeyClick">
</input> </input>
<input class="button" type="button" value="Submit" onclick="buttonClick"></input> <input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.content { .content {
width: 60%; width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.input { .input {
width: 60%;
placeholder-color: gray; placeholder-color: gray;
} }
.button { .button {
width: 60%;
background-color: gray; background-color: gray;
margin-top: 20px; margin-top: 20px;
} }
```
``` ```
```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
...@@ -140,20 +142,21 @@ ...@@ -140,20 +142,21 @@
error: 'error text' error: 'error text'
}); });
}, },
} }
``` ```
![zh-cn_image_0000001252835901](figures/zh-cn_image_0000001252835901.png) ![zh-cn_image_0000001252835901](figures/zh-cn_image_0000001252835901.png)
2. type为button 2. type为button
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="div-button"> <div class="div-button">
<input class="button" type="button" value="Input-Button"></input> <input class="button" type="button" value="Input-Button"></input>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.div-button { .div-button {
flex-direction: column; flex-direction: column;
...@@ -168,14 +171,14 @@ ...@@ -168,14 +171,14 @@
![zh-cn_image_0000001207995958](figures/zh-cn_image_0000001207995958.png) ![zh-cn_image_0000001207995958](figures/zh-cn_image_0000001207995958.png)
3. type为checkbox 3. type为checkbox
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="content"> <div class="content">
<input onchange="checkboxOnChange" checked="true" type="checkbox"></input> <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.content{ .content{
width: 100%; width: 100%;
...@@ -185,7 +188,7 @@ ...@@ -185,7 +188,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
...@@ -201,7 +204,7 @@ ...@@ -201,7 +204,7 @@
![zh-cn_image_0000001208155956](figures/zh-cn_image_0000001208155956.png) ![zh-cn_image_0000001208155956](figures/zh-cn_image_0000001208155956.png)
4. type为radio 4. type为radio
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="content"> <div class="content">
<input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input> <input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input>
...@@ -210,7 +213,7 @@ ...@@ -210,7 +213,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.content{ .content{
width: 100%; width: 100%;
...@@ -220,7 +223,7 @@ ...@@ -220,7 +223,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md
浏览文件 @ 62e0baeb
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
## 示例 ## 示例
``` ```html
<!--xxx.hml --> <!--xxx.hml -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
...@@ -78,11 +78,11 @@ ...@@ -78,11 +78,11 @@
</div> </div>
``` ```
``` ```css
/*xxx.css */ /*xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
align-items: center; margin-left: 20px;
} }
.row { .row {
flex-direction: row; flex-direction: row;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md
浏览文件 @ 62e0baeb
...@@ -62,76 +62,79 @@ ...@@ -62,76 +62,79 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="tutorial-page">
<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}" <div class="mymarquee">
onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee> <marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
<div class="content"> id="testmarquee" onfinish="setfinish">
<button class="controlButton" onclick="onStartClick">Start</button> Life is a journey, not the destination.
<button class="controlButton" onclick="onStopClick">Stop</button> </marquee>
</div>
<div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
<button onclick="makestart" value="start"></button>
<button onclick="makestop" value="stop"></button>
</div> </div>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .tutorial-page {
width: 750px;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
background-color: #ffffff; justify-content: center;
} }
.customMarquee { .marqueetext {
width: 100%; font-size: 37px;
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;
} }
.content { .mymarquee {
flex-direction: row; margin-top: 20px;
width:100%;
height: 100px;
margin-left: 50px;
margin-right: 50px;
border: 1px solid #dc0f27;
border-radius: 15px;
align-items: center;
} }
.controlButton { button{
flex-grow: 1; width: 200px;
background-color: #F2F2F2; height: 80px;
text-color: #0D81F2; margin-top: 100px;
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { private: {
scrollAmount: 30, loopval: 1,
loop: 3, scroll: 8,
marqueeDir: 'left', color1: 'red'
marqueeCustomData: 'Custom marquee',
},
onMarqueeBounce: function() {
console.log("onMarqueeBounce");
}, },
onMarqueeStart: function() { onInit(){
console.log("onMarqueeStart");
}, },
onMarqueeFinish: function() { setfinish(e) {
console.log("onMarqueeFinish"); 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) { makestart(e) {
this.$element('customMarquee').start(); this.$element('testmarquee').start()
}, },
onStopClick (evt) { makestop(e) {
this.$element('customMarquee').stop(); this.$element('testmarquee').stop()
} }
} }
``` ```
![zh-cn_image_0000001127284934](figures/zh-cn_image_0000001127284934.gif) ![zh-cn_image_0000001176075554](figures/zh-cn_image_0000001176075554.gif)
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ 62e0baeb
# picker-view # picker-view
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
嵌入页面的滑动选择器。 嵌入页面的滑动选择器。
...@@ -19,24 +19,24 @@ ...@@ -19,24 +19,24 @@
| ---- | ------ | ---- | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---- | ---------------------------------------- |
| type | string | text | 否 | 设置滑动选择器的类型，该属性不支持动态修改，可选项有：<br/>-&nbsp;text：文本选择器。<br/>-&nbsp;time：时间选择器。<br/>-&nbsp;date：日期选择器。<br/>-&nbsp;datetime：日期时间选择器。<br/>-&nbsp;multi-text：多列文本选择器。 | | type | string | text | 否 | 设置滑动选择器的类型，该属性不支持动态修改，可选项有：<br/>-&nbsp;text：文本选择器。<br/>-&nbsp;time：时间选择器。<br/>-&nbsp;date：日期选择器。<br/>-&nbsp;datetime：日期时间选择器。<br/>-&nbsp;multi-text：多列文本选择器。 |
文本选择器：type=text ### 文本选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------- | ------ | ---- | ---- | ---------------------------------------- | | --------------- | ------ | ---- | ---- | ---------------------------------------- |
| range | Array | - | 否 | 设置文本选择器的取值范围。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：["15",&nbsp;"20",&nbsp;"25"]。 | | range | Array | - | 否 | 设置文本选择器的取值范围。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | string | 0 | 否 | 设置文本选择器的默认选择值，该值需要为range的索引。 | | selected | string | 0 | 否 | 设置文本选择器的默认选择值，该值需要为range的索引。 |
| indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 | | indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 |
| indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 | | indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 |
时间选择器：type=time ### 时间选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- | | ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| containsecond | boolean | false | 否 | 时间选择器是否包含秒。 | | containsecond | boolean | false | 否 | 时间选择器是否包含秒。 |
| selected | string | 当前时间 | 否 | 设置时间选择器的默认取值，格式为&nbsp;HH:mm；<br/>当包含秒时，格式为HH:mm:ss。 | | selected | string | 当前时间 | 否 | 设置时间选择器的默认取值，格式为&nbsp;HH:mm；<br/>当包含秒时，格式为HH:mm:ss。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> | | hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
日期选择器：type=date ### 日期选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ------------ | ---------- | ---- | ---------------------------------------- | | ------------------ | ------------ | ---------- | ---- | ---------------------------------------- |
...@@ -46,21 +46,21 @@ ...@@ -46,21 +46,21 @@
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 | | lunar<sup>5+</sup> | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 | | lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 |
日期时间选择器：type=datetime，日期的选择范围为本年的日月。 ### 日期时间选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | | ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| selected | string | 当前日期时间 | 否 | 设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。 | | selected | string | 当前日期时间 | 否 | 设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> | | hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | | lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 | | lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 |
多列文本选择器：type=multi-text ### 多列文本选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | --------- | ---- | ---------------------------------------- | | -------- | ------- | --------- | ---- | ---------------------------------------- |
| columns | number | - | 是 | 设置多列文本选择器的列数。 | | columns | number | - | 是 | 设置多列文本选择器的列数。 |
| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：[["a","b"],&nbsp;["c","d"]]。 | | range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。 | | selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。 |
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- | | -------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt | \#ffffff | 否 | 候选项字体颜色。 | | color | &lt;color&gt; | \#ffffff | 否 | 候选项字体颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 候选项字体尺寸，类型length，单位px。 | | font-size | &lt;length&gt; | 16px | 否 | 候选项字体尺寸，类型length，单位px。 |
| selected-color | &lt;color&gt; | #ff0a69f7 | 否 | 选中项字体颜色。 | | selected-color | &lt;color&gt; | #ff0a69f7 | 否 | 选中项字体颜色。 |
| selected-font-size | &lt;length&gt; | 20px | 否 | 选中项字体尺寸，类型length，单位px。 | | selected-font-size | &lt;length&gt; | 20px | 否 | 选中项字体尺寸，类型length，单位px。 |
...@@ -83,31 +83,31 @@ ...@@ -83,31 +83,31 @@
仅支持如下事件： 仅支持如下事件：
type=text： ### 文本选择器
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | --------------- | | ------ | ---------------------------------------- | --------------- |
| change | {&nbsp;newValue:&nbsp;newValue,&nbsp;newSelected:&nbsp;newSelected&nbsp;} | 文本选择器选定值后触发该事件。 | | change | {&nbsp;newValue:&nbsp;newValue,&nbsp;newSelected:&nbsp;newSelected&nbsp;} | 文本选择器选定值后触发该事件。 |
type=time： ### 时间选择器
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ------------------------------- | | ------ | ---------------------------------------- | ------------------------------- |
| change | {&nbsp;hour:&nbsp;hour,&nbsp;minute:&nbsp;minute,&nbsp;[second:second]} | 时间选择器选定值后触发该事件。<br/>包含秒时，返回时分秒。 | | change | {&nbsp;hour:&nbsp;hour,&nbsp;minute:&nbsp;minute,&nbsp;[second:second]} | 时间选择器选定值后触发该事件。<br/>包含秒时，返回时分秒。 |
type=date： ### 日期选择器
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | --------------- | | ------ | ---------------------------------------- | --------------- |
| change | {&nbsp;year:year,&nbsp;month:month,&nbsp;day:day&nbsp;} | 日期选择器选择值后触发该事件。 | | change | {&nbsp;year:year,&nbsp;month:month,&nbsp;day:day&nbsp;} | 日期选择器选择值后触发该事件。 |
type=datetime： ### 日期时间选择器
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ----------------- | | ------ | ---------------------------------------- | ----------------- |
| change | {&nbsp;year:year,&nbsp;month:month,&nbsp;day:day,&nbsp;&nbsp;hour:hour,&nbsp;minute:minute&nbsp;} | 日期时间选择器选择值后触发该事件。 | | change | {&nbsp;year:year,&nbsp;month:month,&nbsp;day:day,&nbsp;&nbsp;hour:hour,&nbsp;minute:minute&nbsp;} | 日期时间选择器选择值后触发该事件。 |
type=multi-text： ### 多列文本选择器
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| ------------ | ---------------------------------------- | ---------------------------------------- | | ------------ | ---------------------------------------- | ---------------------------------------- |
...@@ -120,67 +120,252 @@ type=multi-text： ...@@ -120,67 +120,252 @@ type=multi-text：
## 示例 ## 示例
1. 文本选择器
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" @swipe="handleSwipe"> <div class="container">
<text class="title"> <text class="title">
Selected：{{time}} 选中值：{{value}} 选中下标： {{index}}
</text> </text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> <picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
left: 0px; left: 0px;
top: 0px; top: 0px;
width: 454px; width: 454px;
height: 454px; height: 454px;
} }
.title { .title {
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
} margin-top: 20px;
.time-picker { }
width: 500px; ```
height: 400px;
margin-top: 20px; ```js
} /* xxx.js */
``` export default {
data: {
``` options: ['选项1', '选项2', '选项3'],
/* xxx.js */ value: "选项1",
export default { index: 0
data: { },
defaultTime: "", handleChange(data) {
time: "", this.value = data.newValue;
}, this.index = data.newSelected;
onInit() { },
this.defaultTime = this.now(); }
}, ```
handleChange(data) { ![](figures/pickerview1.gif)
this.time = this.concat(data.hour, data.minute);
}, 2. 时间选择器
now() { ```html
const date = new Date(); <!-- xxx.hml -->
const hours = date.getHours(); <div class="container">
const minutes = date.getMinutes(); <text class="title">
return this.concat(hours, minutes); Selected：{{time}}
}, </text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
fill(value) { </div>
return (value > 9 ? "" : "0") + value; ```
},
```css
concat(hours, minutes) { /* xxx.css */
return `${this.fill(hours)}:${this.fill(minutes)}`; .container {
}, flex-direction: column;
} justify-content: center;
``` align-items: center;
left: 0px;
![zh-cn_image_0000001173324845](figures/zh-cn_image_0000001173324845.png) 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
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected：{{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```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
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected：{{datetime}}
</text>
<picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view>
</div>
```
```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
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected：{{ value }}
</text>
<picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
</div>
```
```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
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md
浏览文件 @ 62e0baeb
...@@ -163,128 +163,159 @@ ...@@ -163,128 +163,159 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<select @change="selectChange"> <select @change="selectChange">
<option value="{{ item }}" for="item in selectList"> <option value="{{ item }}" for="item in selectList">
{{ item }} {{ item }}
</option> </option>
</select> </select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange" <picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}"
oncancel="textoncancel" class="pickertext"></picker> onchange="textonchange"
oncancel="textoncancel" class="pickertext" show="false"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker> <picker id="picker1" type="date" value="{{ datevalue }}" start="2002-2-5" end="2030-6-5" selected="{{ dateselect }}"
lunarswitch="true"
<picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12" onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}"
<picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true" selected="{{ timeselect }}" hours="12"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker> onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}" <picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker> lunarswitch="true"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}"
selected="{{ multitextselect }}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
picker{
width:60%; picker {
height:80px; width: 60%;
border-radius:20px; height: 80px;
text-color:white; border-radius: 20px;
font-size:15px; text-color: white;
background-color:#4747e3; font-size: 15px;
margin-left:20%; background-color: #4747e3;
margin-left: 20%;
} }
select{
background-color: #efecec; select {
height: 50px; background-color: #efecec;
width: 60%; height: 50px;
margin-left: 20%; width: 60%;
margin-top: 300px; margin-left: 20%;
margin-bottom: 50px; margin-top: 300px;
font-size: 22px; margin-bottom: 50px;
font-size: 22px;
} }
``` ```
``` ```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@system.router';
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
selectList:["text","data","time","datetime","multitext"], selectList: ["text", "data", "time", "datetime", "multitext"],
rangetext:['15', "20", "25"], rangetext: ['15', "20", "25"],
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]], multitext: [["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue:'default textvalue', textvalue: 'default textvalue',
datevalue:'default datevalue', datevalue: 'default datevalue',
timevalue:'default timevalue', timevalue: 'default timevalue',
datetimevalue:'default datetimevalue', datetimevalue: 'default datetimevalue',
multitextvalue:'default multitextvalue', multitextvalue: 'default multitextvalue',
containsecond:true, containsecond: true,
multitextselect:[1,2,0], multitextselect: [1, 2, 0],
datetimeselect:'2012-5-6-11-25', datetimeselect: '2012-5-6-11-25',
timeselect:'11:22:30', timeselect: '11:22:30',
dateselect:'2021-3-2', dateselect: '2021-3-2',
textselect:'2' textselect: '2'
}, },
selectChange(e){ selectChange(e) {
for(let i = 0;i<this.selectList.length;i++){ for (let i = 0;i < this.selectList.length; i++) {
if(e.newValue == this.selectList[i]){ if (e.newValue == this.selectList[i]) {
this.$element("picker"+i).show(); this.$element("picker" + i).show();
} }
} }
}, },
textonchange(e) { textonchange(e) {
this.textvalue = e.newValue; this.textvalue = e.newValue;
prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected }) prompt.showToast({
}, message: "text:" + e.newValue + ",newSelected:" + e.newSelected
textoncancel(e) { })
prompt.showToast({ message:"text: textoncancel" }) },
}, textoncancel(e) {
dateonchange(e) { prompt.showToast({
this.datevalue = e.year + "-" + e.month + "-" + e.day; message: "text: textoncancel"
prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day }) })
}, },
dateoncancel() { dateonchange(e) {
prompt.showToast({ message:"date: dateoncancel" }) this.datevalue = e.year + "-" + e.month + "-" + e.day;
}, prompt.showToast({
timeonchange(e) { message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day
if(this.containsecond){ })
this.timevalue=e.hour+":"+e.minute+":"+e.second; },
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second }) dateoncancel() {
} else { prompt.showToast({
this.timevalue=e.hour+":"+e.minute; message: "date: dateoncancel"
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute }) })
}}, },
timeoncancel() { timeonchange(e) {
prompt.showToast({ message:"timeoncancel" }) if (this.containsecond) {
}, this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
datetimeonchange(e) { prompt.showToast({
this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
prompt.showToast({ message:"Time:"+(e.month+1)+"-"+e.day+" "+e.hour+":"+e.minute }) })
}, } else {
datetimeoncancel() { this.timevalue = e.hour + ":" + e.minute;
prompt.showToast({ message:"datetimeoncancel" }) prompt.showToast({
}, message: "Time:" + e.hour + ":" + e.minute
multitextonchange(e) { })
this.multitextvalue=e.newValue; }
prompt.showToast({ message:"Multi-column text change" + e.newValue }) },
}, timeoncancel() {
multitextoncancel() { prompt.showToast({
prompt.showToast({ message:"multitextoncancel" }) message: "timeoncancel"
}, })
popup_picker() { },
this.$element("picker_text").show(); datetimeonchange(e) {
}, this.datetimevalue = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute;
prompt.showToast({
message: "Time:" + (e.month + 1) + "-" + e.day + " " + e.hour + ":" + e.minute
})
},
datetimeoncancel() {
prompt.showToast({
message: "datetimeoncancel"
})
},
multitextonchange(e) {
this.multitextvalue = e.newValue;
prompt.showToast({
message: "Multi-column text change" + e.newValue
})
},
multitextoncancel() {
prompt.showToast({
message: "multitextoncancel"
})
},
popup_picker() {
this.$element("picker_text").show();
},
} }
``` ```
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md
浏览文件 @ 62e0baeb
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<qrcode value="{{qr_value}}" type="{{qr_type}}" <qrcode value="{{qr_value}}" type="{{qr_type}}"
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -90,7 +90,7 @@ select{ ...@@ -90,7 +90,7 @@ select{
} }
``` ```
``` ```js
/* index.js */ /* index.js */
export default { export default {
data: { data: {
...@@ -108,9 +108,6 @@ export default { ...@@ -108,9 +108,6 @@ export default {
this.qr_type = 'circle' this.qr_type = 'circle'
} }
}, },
setvalue(e) {
this.qr_value = e.newValue
},
setcol(e) { setcol(e) {
this.qr_col = e.newValue this.qr_col = e.newValue
}, },
...@@ -122,4 +119,3 @@ export default { ...@@ -122,4 +119,3 @@ export default {
![zh-cn_image_0000001222948301](figures/zh-cn_image_0000001222948301.gif) ![zh-cn_image_0000001222948301](figures/zh-cn_image_0000001222948301.gif)
zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md
浏览文件 @ 62e0baeb
# search # search
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供搜索框组件，用于提供用户搜索内容的输入区域。 提供搜索框组件，用于提供用户搜索内容的输入区域。
...@@ -15,19 +15,19 @@ ...@@ -15,19 +15,19 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------------- | ----------------------- | ---- | ---- | --------------------------------- |
| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 | | icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 |
| hint | string | - | 否 | 搜索提示文字。 | | hint | string | - | 否 | 搜索提示文字。 |
| value | string | - | 否 | 搜索框搜索文本值。 | | value | string | - | 否 | 搜索框搜索文本值。 |
| searchbutton<sup>5+</sup> | string | - | 否 | 搜索框末尾搜索按钮文本值。 | | searchbutton<sup>5+</sup> | string | - | 否 | 搜索框末尾搜索按钮文本值。 |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | | menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
**表1** MenuOption<sup>5+</sup> **表1** MenuOption<sup>5+</sup>
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ------- | ------ | ----------- |
| icon | string | 菜单选项中的图标路径。 | | icon | string | 菜单选项中的图标路径。 |
| content | string | 菜单选项中的文本内容。 | | content | string | 菜单选项中的文本内容。 |
...@@ -35,28 +35,28 @@ ...@@ -35,28 +35,28 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 搜索框的文本颜色。 | | color | &lt;color&gt; | \#e6000000 | 否 | 搜索框的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 搜索框的文本尺寸。 | | font-size | &lt;length&gt; | 16px | 否 | 搜索框的文本尺寸。 |
| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| placeholder-color | &lt;color&gt; | \#99000000<br/> | 否 | 搜索框的提示文本颜色。 | | placeholder-color | &lt;color&gt; | \#99000000<br/> | 否 | 搜索框的提示文本颜色。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 搜索框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;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)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 | | caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;text:newText&nbsp;} | 输入内容发生变化时触发。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;改变value属性值不会触发该回调。 | | change | {&nbsp;text:newText&nbsp;} | 输入内容发生变化时触发。<br/>改变value属性值不会触发该回调。 |
| submit | {&nbsp;text:submitText&nbsp;} | 点击搜索图标、搜索按钮<sup>5+</sup>或者按下软键盘搜索按钮时触发。 | | submit | {&nbsp;text:submitText&nbsp;} | 点击搜索图标、搜索按钮<sup>5+</sup>或者按下软键盘搜索按钮时触发。 |
| translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | | translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | | share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
| search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | | search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | | optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<search hint="请输入搜索内容" searchbutton="搜索" @search="search"> <search hint="请输入搜索内容" searchbutton="搜索" @search="search">
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md
浏览文件 @ 62e0baeb
# slider # slider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
>
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动条组件，用来快速调节设置值，如音量、亮度等。 滑动条组件，用来快速调节设置值，如音量、亮度等。
...@@ -50,55 +51,33 @@ ...@@ -50,55 +51,33 @@
| 属性 | 类型 | 说明 | | 属性 | 类型 | 说明 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| value<sup>5+</sup> | number | 当前slider的进度值。 | | value<sup>5+</sup> | number | 当前slider的进度值。 |
| mode<sup>5+</sup> | string | 当前change事件的类型，可选值为：<br/>-&nbsp;start：slider的值开始改变。<br/>-&nbsp;move：slider的值跟随手指拖动中。<br/>-&nbsp;end：slider的值结束改变。 | | mode<sup>5+</sup> | string | 当前change事件的类型，可选值为：<br/>-&nbsp;start：slider的值开始改变。<br/>-&nbsp;move：slider的值跟随手指拖动中。<br/>-&nbsp;end：slider的值结束改变。<br/>-&nbsp;click：slider的值在点击进度条后改变。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text>slider start value is {{startValue}}</text> <slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
<text>slider current value is {{currentValue}}</text> <slider class="" min="0" max="100" value="{{ value }}" step="20" mode="inset" showtips="true"></slider>
<text>slider end value is {{endValue}}</text> <slider class="" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset" showtips="false"></slider>
<slider min="0" max="100" value="{{value}}" onchange="setvalue" ></slider>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
``` slider{
margin-top: 100px;
```
// 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;
}
}
} }
``` ```
![zh-cn_image_0000001173324709](figures/zh-cn_image_0000001173324709.png)
![zh-cn_image_0000001173324709](figures/slider.png)
zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md
浏览文件 @ 62e0baeb
# switch # switch
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
开关选择器，通过开关，开启或关闭某个功能。 开关选择器，通过开关，开启或关闭某个功能。
...@@ -19,12 +19,12 @@ ...@@ -19,12 +19,12 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------- | ----- | ---- | ---------- |
| checked | boolean | false | 否 | 是否选中。 | | checked | boolean | false | 否 | 是否选中。 |
| showtext | boolean | false | 否 | 是否显示文本。 | | showtext | boolean | false | 否 | 是否显示文本。 |
| texton | string | "On" | 否 | 选中时显示的文本。 | | texton | string | "On" | 否 | 选中时显示的文本。 |
| textoff | string | "Off" | 否 | 未选中时显示的文本。 | | textoff | string | "Off" | 否 | 未选中时显示的文本。 |
## 样式 ## 样式
...@@ -33,24 +33,24 @@ ...@@ -33,24 +33,24 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| texton-color(Rich) | &lt;color&gt; | \#000000 | 否 | 选中时显示的文本颜色。 | | texton-color(Rich) | &lt;color&gt; | \#000000 | 否 | 选中时显示的文本颜色，仅设置texton和textoff生效。 |
| textoff-color(Rich) | &lt;color&gt; | \#000000 | 否 | 未选中时显示的文本颜色。 | | textoff-color(Rich) | &lt;color&gt; | \#000000 | 否 | 未选中时显示的文本颜色，仅设置texton和textoff生效。 |
| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 | | text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 |
| font-size(Rich) | &lt;length&gt; | - | 否 | 文本尺寸，仅设置texton和textoff生效。 | | font-size(Rich) | &lt;length&gt; | - | 否 | 文本尺寸，仅设置texton和textoff生效。 |
| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见text组件[font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-weight(Rich) | number&nbsp;\|&nbsp;string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见[text组件的font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight(Rich) | number&nbsp;\|&nbsp;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生效。 | | font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 |
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------ | ---------------------------------------- | ------------- |
| change | {&nbsp;checked:&nbsp;checkedValue&nbsp;} | 选中状态改变时触发该事件。 | | change | {&nbsp;checked:&nbsp;checkedValue&nbsp;} | 选中状态改变时触发该事件。 |
## 方法 ## 方法
...@@ -59,48 +59,66 @@ ...@@ -59,48 +59,66 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<switch showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange"> <switch @change="normalswitchChange">
</switch> </switch>
<switch class="switch" showtext="true" texton="开启" textoff="关闭" @change="switchChange">
</switch>
<switch class="switch text" showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
</switch>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
switch{ .switch {
texton-color:#002aff; texton-color: red;
textoff-color:silver; textoff-color: forestgreen;
text-padding:20px; }
.text {
text-padding: 20px;
font-size: 30px;
font-weight: 700;
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
title: 'World' title: 'World'
}, },
switchChange(e){ switchChange(e) {
console.log(e.checked); if (e.checked) {
if(e.checked){ prompt.showToast({
prompt.showToast({ message: "打开开关"
message: "打开开关" });
}); } else {
}else{ prompt.showToast({
prompt.showToast({ message: "关闭开关"
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)
zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ 62e0baeb
# text # text
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> >
> - 文本的展示内容需要写在元素标签内。 > - 文本的展示内容需要写在元素标签内。
文本，用于呈现一段信息。 文本，用于呈现一段信息。
...@@ -27,43 +27,43 @@ ...@@ -27,43 +27,43 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 | | color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 | | font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果需要支持动态生效，请参看config描述文件中config-changes标签。 | | allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果需要支持动态生效，请参看config描述文件中config-changes标签。 |
| letter-spacing | &lt;length&gt; | 0px | 否 | 设置文本的字符间距。 | | letter-spacing | &lt;length&gt; | 0px | 否 | 设置文本的字符间距。 |
| word-spacing<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;string | normal | 否 | 设置文本之间的间距，string可选值为：<br/>normal：默认的字间距。 | | word-spacing<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;string | normal | 否 | 设置文本之间的间距，string可选值为：<br/>normal：默认的字间距。 |
| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 | | font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，默认为400，取值越大，字体越粗。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;number取值必须为100的整数倍。<br/>string类型取值支持如下四个值：lighter、normal、bold、bolder。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，默认为400，取值越大，字体越粗。number取值必须为100的整数倍。<br/>string类型取值支持如下四个值：lighter、normal、bold、bolder。 |
| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：<br/>-&nbsp;underline：文字下划线修饰；<br/>-&nbsp;line-through：穿过文本的修饰线n<br/>-&nbsp;none：标准文本。 | | text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：<br/>-&nbsp;underline：文字下划线修饰；<br/>-&nbsp;line-through：穿过文本的修饰线n<br/>-&nbsp;none：标准文本。 |
| text-decoration-color<sup>7+</sup> | &lt;color&gt; | - | 否 | 设置文本修饰线的颜色。 | | text-decoration-color<sup>7+</sup> | &lt;color&gt; | - | 否 | 设置文本修饰线的颜色。 |
| text-align | string | start<br/> | 否 | 设置文本的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐；<br/>-&nbsp;center：文本居中对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;start：根据文字书写相同的方向对齐；<br/>-&nbsp;end：根据文字书写相反的方向对齐。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 | | text-align | string | start<br/> | 否 | 设置文本的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐；<br/>-&nbsp;center：文本居中对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;start：根据文字书写相同的方向对齐；<br/>-&nbsp;end：根据文字书写相反的方向对齐。<br/>如果文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
| line-height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>7+</sup>&nbsp;\|&nbsp;string<sup>7+</sup> | 0px<sup>1-6</sup><br/>normal<sup>7+</sup> | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：<br/>normal<sup>7+</sup>：默认的行高。 | | line-height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>7+</sup>&nbsp;\|&nbsp;string<sup>7+</sup> | 0px<sup>1-6</sup><br/>normal<sup>7+</sup> | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：<br/>normal<sup>7+</sup>：默认的行高。 |
| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：<br/>-&nbsp;clip：将文本根据父容器大小进行裁剪显示；<br/>-&nbsp;ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 | | text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：<br/>-&nbsp;clip：将文本根据父容器大小进行裁剪显示；<br/>-&nbsp;ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 |
| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| max-lines | number&nbsp;\|&nbsp;string<sup>7+</sup> | - | 否 | 设置文本的最大行数，string类型可选值为：<br/>-&nbsp;auto<sup>7+</sup>：文本行数自适应容器高度。 | | max-lines | number&nbsp;\|&nbsp;string<sup>7+</sup> | - | 否 | 设置文本的最大行数，string类型可选值为：<br/>-&nbsp;auto<sup>7+</sup>：文本行数自适应容器高度。 |
| min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | | min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | | max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| font-size-step | &lt;length&gt; | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 | | font-size-step | &lt;length&gt; | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 |
| prefer-font-sizes | &lt;array&gt; | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。<br/>如：prefer-font-sizes:&nbsp;12px,14px,16px | | prefer-font-sizes | &lt;array&gt; | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。<br/>如：prefer-font-sizes:&nbsp;12px,14px,16px |
| word-break<sup>6+</sup> | string | normal | 否 | 设置文本折行模式，可选值为：<br/>-&nbsp;normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。<br/>-&nbsp;break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。<br/>-&nbsp;break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 | | word-break<sup>6+</sup> | string | normal | 否 | 设置文本折行模式，可选值为：<br/>-&nbsp;normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。<br/>-&nbsp;break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。<br/>-&nbsp;break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 |
| text-indent<sup>7+</sup> | &lt;length&gt; | - | 否 | 设置首行缩进量。 | | text-indent<sup>7+</sup> | &lt;length&gt; | - | 否 | 设置首行缩进量。 |
| white-space<sup>7+</sup> | string | pre | 否 | 设置处理元素中空白的模式，可选值为：<br/>-&nbsp;normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；<br/>-&nbsp;nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；<br/>-&nbsp;pre：所有东西原样输出；<br/>-&nbsp;pre-wrap：所有东西原样输出，文本换行；<br/>-&nbsp;pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 | | white-space<sup>7+</sup> | string | pre | 否 | 设置处理元素中空白的模式，可选值为：<br/>-&nbsp;normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；<br/>-&nbsp;nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；<br/>-&nbsp;pre：所有东西原样输出；<br/>-&nbsp;pre-wrap：所有东西原样输出，文本换行；<br/>-&nbsp;pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 |
| adapt-height<sup>7+</sup> | boolean | false | 否 | 文本大小是否自适应容器高度。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;设置字体大小自适应相关样式后生效。 | | adapt-height<sup>7+</sup> | boolean | false | 否 | 文本大小是否自适应容器高度。<br/>设置字体大小自适应相关样式后生效。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。 > - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
> >
> - 文本换行：文本可以通过转义字符\r\n进行换行。 > - 文本换行：文本可以通过转义字符\r\n进行换行。
> >
> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。 > - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。
> >
> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。 > - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。
> >
> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。 > - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。
> >
> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容) > - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容)
## 事件 ## 事件
...@@ -76,84 +76,66 @@ ...@@ -76,84 +76,66 @@
## 示例 ## 示例
1.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <text class="title">default text</text>
<text class="title"> <text class="title textcolor">hello world with color</text>
Hello {{ title }} <text class="title textsize">hello world with font-size</text>
</text> <text class="title textletterspacing">hello world with letter-spacing</text>
</div> <text class="title textwordspacing">hello world with word-spacing</text>
<text class="title textstyle">hello world with italic</text>
<text class="title textweight">hello world with font-weight</text>
<text class="title textdecoration1">hello world with underline</text>
<text class="title textdecoration2">hello world with line-through</text>
<text class="title textalign">hello world with text-align:right</text>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} flex-direction: column;
.content{
width: 400px;
height: 400px;
border: 20px;
} }
.title { .title {
font-size: 80px; text-align: center;
text-align: center; width: 800px;
width: 400px; height: 60px;
height: 400px;
} }
``` .textcolor {
color: indianred;
```
// xxx.js
export default {
data: {
title: 'World'
}
} }
``` .textsize {
font-size: 40px;
![zh-cn_image_0000001167823076](figures/zh-cn_image_0000001167823076.png)
```
<!-- xxx.hml -->
<div class="container">
<text class="text1">
This is a passage
</text>
<text class="text2">
This is a passage
</text>
</div>
```
```
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
justify-content: center;
} }
.text1{ .textletterspacing {
word-spacing: 10px; letter-spacing: -3px;
adapt-height: true;
} }
.text2{ .textwordspacing {
width: 200px; word-spacing: 20px;
max-lines: 1; }
text-overflow: ellipsis; .textstyle {
text-valign: middle; font-style: italic;
line-height: 40px; }
text-decoration: underline; .textweight {
text-decoration-color: red; font-weight: 700;
text-indent: 20px; }
white-space: pre; .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)
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md
浏览文件 @ 62e0baeb
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
### getContext ### getContext
getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext getContext(type: '2d', options?: ContextAttrOptions): CanvasRenderingContext2D
获取canvas绘图上下文。不支持在onInit和onReady中进行调用。 获取canvas绘图上下文。不支持在onInit和onReady中进行调用。
...@@ -77,7 +77,7 @@ toDataURL(type?: string, quality?: number): string ...@@ -77,7 +77,7 @@ toDataURL(type?: string, quality?: number): string
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
...@@ -85,7 +85,7 @@ toDataURL(type?: string, quality?: number): string ...@@ -85,7 +85,7 @@ toDataURL(type?: string, quality?: number): string
</div> </div>
``` ```
``` ```css
// xxx.js // xxx.js
export default { export default {
handleClick() { handleClick() {
......
zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md
浏览文件 @ 62e0baeb
...@@ -92,20 +92,19 @@ animate( keyframes: Keyframes, options: Options)：void ...@@ -92,20 +92,19 @@ animate( keyframes: Keyframes, options: Options)：void
| repeat | 动画重播事件。 | | repeat | 动画重播事件。 |
- 示例 - 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="idName" class="box"></div> <div id="idName" class="box"></div>
<div class="buttonBox"> <div class="buttonBox">
<button @click="start"> <button @click="start">
start start
</button> </button>
<button @click="cancel"> <button @click="cancel">
cancels cancel
</button> </button>
</div>
</div> </div>
``` ```
``` ```
/* xxx.css */ /* xxx.css */
......
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @ 62e0baeb
...@@ -67,4 +67,3 @@ ...@@ -67,4 +67,3 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 通用样式都不是必填项。 > 通用样式都不是必填项。
zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
浏览文件 @ 62e0baeb
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage”。 PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage”。
``` ```html
<!-- PageA --> <!-- PageA -->
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -57,20 +57,20 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage ...@@ -57,20 +57,20 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
jump() { jump() {
router.push({ router.push({
// 路径要与config.json配置里面的相同 // 路径要与config.json配置里面的相同
uri: 'pages/detailpage', url: 'pages/detailpage',
}); });
}, },
} }
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.shared-transition-style { .shared-transition-style {
shared-transition-effect: exchange; shared-transition-effect: exchange;
...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
} }
``` ```
``` ```html
<!-- PageB --> <!-- PageB -->
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -90,9 +90,9 @@ export default { ...@@ -90,9 +90,9 @@ export default {
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
jumpBack() { jumpBack() {
router.back(); router.back();
...@@ -100,7 +100,7 @@ export default { ...@@ -100,7 +100,7 @@ export default {
} }
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.shared-transition-style { .shared-transition-style {
shared-transition-effect: exchange; shared-transition-effect: exchange;
...@@ -130,7 +130,7 @@ export default { ...@@ -130,7 +130,7 @@ export default {
source_page包含顶部内容以及卡片列表，点击卡片可以跳转到target_page。 source_page包含顶部内容以及卡片列表，点击卡片可以跳转到target_page。
``` ```html
<!-- source_page --> <!-- source_page -->
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -138,35 +138,37 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar ...@@ -138,35 +138,37 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar
<text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text> <text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text>
</div> </div>
<list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center"> <list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center">
<list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.uri}})"> <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.url}})">
<text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text> <text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text>
</list-item> </list-item>
</list> </list>
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
import router from '@system.router' import router from '@ohos.router'
export default { export default {
data: { list: [] }, data: { list: [] },
onInit() { onInit() {
for(var i = 0; i < 10; i++) { 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 } title: "this is title" + i, id: "item_" + i }
this.list.push(item); this.list.push(item);
} }
}, },
jumpPage(id, uri) { jumpPage(id, url) {
var cardId = this.$element(id).ref; var cardId = this.$element(id).ref;
router.push({ uri: uri, params : { ref : cardId } }); router.push({ url: url, params : { ref : cardId } });
} }
} }
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #ABDAFF; background-color: #ABDAFF;
...@@ -184,7 +186,7 @@ export default { ...@@ -184,7 +186,7 @@ export default {
} }
``` ```
``` ```html
<!-- target_page --> <!-- target_page -->
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -194,9 +196,11 @@ export default { ...@@ -194,9 +196,11 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #EBFFD7; background-color: #EBFFD7;
...@@ -245,7 +249,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ...@@ -245,7 +249,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
1. Page1 1. Page1
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text>index</text> <text>index</text>
...@@ -253,22 +257,22 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ...@@ -253,22 +257,22 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
</div> </div>
``` ```
``` ```js
<!-- xxx.js --> <!-- xxx.js -->
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
data: { data: {
}, },
jump() { jump() {
router.push({ router.push({
uri:'pages/transition2/transition2' url:'pages/transition2/transition2'
}) })
} }
} }
``` ```
``` ```css
<!-- xxx.css --> <!-- xxx.css -->
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -315,17 +319,17 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ...@@ -315,17 +319,17 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
2. Page2 2. Page2
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text>transition</text> <text>transition</text>
<div class="move_page" onclick="jumpBack"></div> <div class="move_page" onclick="jumpBack"></div>
</div </div>
``` ```
``` ```js
<!-- xxx.js --> <!-- xxx.js -->
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
data: { data: {
...@@ -334,9 +338,10 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ...@@ -334,9 +338,10 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
router.back() router.back()
} }
} }
```
```
```
```css
<!-- xxx.css --> <!-- xxx.css -->
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -379,4 +384,4 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2 ...@@ -379,4 +384,4 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
} }
``` ```
![transition](figures/transition.gif) ![transition](figures/transition.gif)
zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
浏览文件 @ 62e0baeb
# list # list
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
...@@ -19,86 +19,86 @@ ...@@ -19,86 +19,86 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------------------------- | ---------------------------------------- | ------- | ---- | ---------------------------------------- |
| scrollpage | boolean | false | 否 | 设置为true时，将&nbsp;list&nbsp;顶部页面中非&nbsp;list&nbsp;部分随&nbsp;list&nbsp;一起滑出可视区域，当list方向为row时，不支持此属性。 | | scrollpage | boolean | false | 否 | 设置为true时，将&nbsp;list&nbsp;顶部页面中非&nbsp;list&nbsp;部分随&nbsp;list&nbsp;一起滑出可视区域，当list方向为row时，不支持此属性。 |
| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。<br/>可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。 | | cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。<br/>可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。 |
| scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：<br/>-&nbsp;off：不显示。<br/>-&nbsp;auto：按需显示(触摸时显示，2s后消失)。<br/>-&nbsp;on：常驻显示。 | | scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：<br/>-&nbsp;off：不显示。<br/>-&nbsp;auto：按需显示(触摸时显示，2s后消失)。<br/>-&nbsp;on：常驻显示。 |
| scrolleffect | string | spring | 否 | 滑动效果，目前支持如下滑动效果：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。<br/>-&nbsp;no：滑动到边缘后无效果。 | | scrolleffect | string | spring | 否 | 滑动效果，目前支持如下滑动效果：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。<br/>-&nbsp;no：滑动到边缘后无效果。 |
| indexer | boolean&nbsp;\|&nbsp;Array&lt;string&gt; | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：<br/>"indexer"&nbsp;:&nbsp;"true"表示使用默认字母索引表。<br/>"indexer"&nbsp;:&nbsp;"false"表示无索引。<br/>"indexer"&nbsp;:&nbsp;['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。<br/>>&nbsp;<br/>>&nbsp;-&nbsp;点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 | | indexer | boolean&nbsp;\|&nbsp;Array&lt;string&gt; | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：<br/>"indexer"&nbsp;:&nbsp;"true"表示使用默认字母索引表。<br/>"indexer"&nbsp;:&nbsp;"false"表示无索引。<br/>"indexer"&nbsp;:&nbsp;['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。<br/>indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。<br/>点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 |
| indexercircle<sup>5+</sup> | boolean | - | 否 | 是否为环形索引。<br/>穿戴设备默认为true，其他为false。indexer为false时不生效。 | | indexercircle<sup>5+</sup> | boolean | - | 否 | 是否为环形索引。<br/>穿戴设备默认为true，其他为false。indexer为false时不生效。 |
| indexermulti<sup>5+</sup> | boolean | false | 否 | 是否开启索引条多语言功能。<br/>indexer为false时不生效。 | | indexermulti<sup>5+</sup> | boolean | false | 否 | 是否开启索引条多语言功能。<br/>indexer为false时不生效。 |
| indexerbubble<sup>5+</sup> | boolean | true | 否 | 是否开启索引切换的气泡提示。<br/>indexer为false时不生效。 | | indexerbubble<sup>5+</sup> | boolean | true | 否 | 是否开启索引切换的气泡提示。<br/>indexer为false时不生效。 |
| divider<sup>5+</sup> | boolean | false | 否 | item是否自带分隔线。<br/>其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。 | | divider<sup>5+</sup> | boolean | false | 否 | item是否自带分隔线。<br/>其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。 |
| shapemode | string | default | 否 | 侧边滑动栏的形状类型。<br/>-&nbsp;default：不指定，跟随主题；<br/>-&nbsp;rect：矩形；<br/>-&nbsp;round：圆形。 | | shapemode | string | default | 否 | 侧边滑动栏的形状类型。<br/>-&nbsp;default：不指定，跟随主题；<br/>-&nbsp;rect：矩形；<br/>-&nbsp;round：圆形。 |
| updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。<br/>-&nbsp;false：新增删除item时无过渡动效。<br/>-&nbsp;true：新增删除item时播放过程动效。 | | updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。<br/>-&nbsp;false：新增删除item时无过渡动效。<br/>-&nbsp;true：新增删除item时播放过程动效。 |
| chainanimation<sup>5+</sup> | boolean | false | 否 | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。<br/>-&nbsp;false：不启用链式联动<br/>-&nbsp;true：启用链式联动<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;-&nbsp;不支持动态修改。<br/>&nbsp;&nbsp;>&nbsp;-&nbsp;如同时配置了indexer，链式动效不生效。<br/>&nbsp;&nbsp;>&nbsp;-&nbsp;如配置了链式动效，list-item的sticky不生效。 | | chainanimation<sup>5+</sup> | boolean | false | 否 | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。<br/>-&nbsp;false：不启用链式联动<br/>-&nbsp;true：启用链式联动<br/>不支持动态修改。<br/>同时配置了indexer，链式动效不生效。<br/>如配置了链式动效，list-item的sticky不生效。 |
| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。 | | initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。 |
| initialoffset | &lt;length&gt; | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。 | | initialoffset | &lt;length&gt; | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。 |
| selected<sup>5+</sup> | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 | | selected<sup>5+</sup> | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
## 样式 ## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------------------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- |
| divider-color<sup>5+</sup> | &lt;color&gt; | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 | | divider-color<sup>5+</sup> | &lt;color&gt; | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 |
| divider-height<sup>5+</sup> | &lt;length&gt; | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 | | divider-height<sup>5+</sup> | &lt;length&gt; | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 |
| divider-length<sup>5+</sup> | &lt;length&gt; | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 | | divider-length<sup>5+</sup> | &lt;length&gt; | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 |
| divider-origin<sup>5+</sup> | &lt;length&gt; | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。 | | divider-origin<sup>5+</sup> | &lt;length&gt; | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。 |
| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：<br/>-&nbsp;column：主轴为纵向。<br/>-&nbsp;row：主轴为横向。<br/>其他组件默认值为row，在list组件中默认值为column。 | | flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：<br/>-&nbsp;column：主轴为纵向。<br/>-&nbsp;row：主轴为横向。<br/>其他组件默认值为row，在list组件中默认值为column。 |
| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;设置多列时，在list交叉轴上进行均分，每一列大小相同。 | | columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。<br/>设置多列时，在list交叉轴上进行均分，每一列大小相同。 |
| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 | | align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。<br/>align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 |
| item-extent | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 | | item-extent | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 |
| fade-color | &lt;color&gt; | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 | | fade-color | &lt;color&gt; | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 | | scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 | | scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| scrollbar-offset<sup>6+</sup> | &lt;length&gt; | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 | | scrollbar-offset<sup>6+</sup> | &lt;length&gt; | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 |
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | -------------------------- | ---------------------------------------- | ---------------------------------------- |
| indexerchange<sup>5+</sup> | {&nbsp;local:&nbsp;booleanValue&nbsp;} | 多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：<br/>-&nbsp;true:&nbsp;当前展示本地索引。<br/>-&nbsp;false:&nbsp;当前展示字母索引。 | | indexerchange<sup>5+</sup> | {&nbsp;local:&nbsp;booleanValue&nbsp;} | 多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：<br/>-&nbsp;true:&nbsp;当前展示本地索引。<br/>-&nbsp;false:&nbsp;当前展示字母索引。 |
| scroll | {&nbsp;scrollX:&nbsp;scrollXValue,&nbsp;scrollY:&nbsp;scrollYValue,&nbsp;scrollState:&nbsp;stateValue&nbsp;} | 列表滑动的偏移量和状态回调。<br/>stateValue:&nbsp;0表示列表滑动已经停止。<br/>stateValue:&nbsp;1表示列表正在用户触摸状态下滑动。<br/>stateValue:&nbsp;2表示列表正在用户松手状态下滑动。 | | scroll | {&nbsp;scrollX:&nbsp;scrollXValue,&nbsp;scrollY:&nbsp;scrollYValue,&nbsp;scrollState:&nbsp;stateValue&nbsp;} | 列表滑动的偏移量和状态回调。<br/>stateValue:&nbsp;0表示列表滑动已经停止。<br/>stateValue:&nbsp;1表示列表正在用户触摸状态下滑动。<br/>stateValue:&nbsp;2表示列表正在用户松手状态下滑动。 |
| scrollbottom | - | 当前列表已滑动到底部位置。 | | scrollbottom | - | 当前列表已滑动到底部位置。 |
| scrolltop | - | 当前列表已滑动到顶部位置。 | | scrolltop | - | 当前列表已滑动到顶部位置。 |
| scrollend | - | 列表滑动已经结束。 | | scrollend | - | 列表滑动已经结束。 |
| scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 | | scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 |
| requestitem | - | 请求创建新的list-item。<br/>长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。 | | requestitem | - | 请求创建新的list-item。<br/>长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。 |
| rotate<sup>7+</sup> | {&nbsp;rotateValue:&nbsp;number&nbsp;} | 返回表冠旋转角度增量值，仅智能穿戴支持。 | | rotate<sup>7+</sup> | {&nbsp;rotateValue:&nbsp;number&nbsp;} | 返回表冠旋转角度增量值，仅智能穿戴支持。 |
## 方法 ## 方法
支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： 支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------- | ---------------------------------------- | ---------------------------------------- |
| scrollTo | {&nbsp;index:&nbsp;number(指定位置)&nbsp;} | list滑动到指定index的item位置。 | | scrollTo | {&nbsp;index:&nbsp;number(指定位置)&nbsp;} | list滑动到指定index的item位置。 |
| scrollTop | {&nbsp;smooth:&nbsp;boolean&nbsp;} | smooth缺省为false，表示直接滚动到顶部。<br/>smooth为true，表示平滑滚动到顶部。 | | scrollTop | {&nbsp;smooth:&nbsp;boolean&nbsp;} | smooth缺省为false，表示直接滚动到顶部。<br/>smooth为true，表示平滑滚动到顶部。 |
| scrollBottom | {&nbsp;smooth:&nbsp;boolean&nbsp;} | smooth缺省为false，表示直接滚动到底部。<br/>smooth为true，表示平滑滚动到底部。 | | scrollBottom | {&nbsp;smooth:&nbsp;boolean&nbsp;} | smooth缺省为false，表示直接滚动到底部。<br/>smooth为true，表示平滑滚动到底部。 |
| scrollPage | {&nbsp;reverse:&nbsp;boolean,&nbsp;smooth:&nbsp;boolean&nbsp;} | reverse缺省值为false，表示下一页，无完整页则滚动到底部。<br/>reverse为true，表示上一页，无完整页则滚动到顶部。<br/>smooth缺省值为false，表示直接滚动一页。<br/>smooth为true，表示平滑滚动一页。 | | scrollPage | {&nbsp;reverse:&nbsp;boolean,&nbsp;smooth:&nbsp;boolean&nbsp;} | reverse缺省值为false，表示下一页，无完整页则滚动到底部。<br/>reverse为true，表示上一页，无完整页则滚动到顶部。<br/>smooth缺省值为false，表示直接滚动一页。<br/>smooth为true，表示平滑滚动一页。 |
| scrollArrow | {&nbsp;reverse:&nbsp;boolean,&nbsp;smooth:&nbsp;boolean&nbsp;} | reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。<br/>reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。<br/>smooth缺省值为false，表示直接滚动。<br/>smooth为true，表示平滑滚动。 | | scrollArrow | {&nbsp;reverse:&nbsp;boolean,&nbsp;smooth:&nbsp;boolean&nbsp;} | reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。<br/>reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。<br/>smooth缺省值为false，表示直接滚动。<br/>smooth为true，表示平滑滚动。 |
| collapseGroup | {&nbsp;groupid:&nbsp;string&nbsp;} | 收拢指定的group。<br/>groupid：需要收拢的group的id。<br/>当groupid未指定时收拢所有的group。 | | collapseGroup | {&nbsp;groupid:&nbsp;string&nbsp;} | 收拢指定的group。<br/>groupid：需要收拢的group的id。<br/>当groupid未指定时收拢所有的group。 |
| expandGroup | {&nbsp;groupid:&nbsp;string&nbsp;} | 展开指定的group。<br/>groupid：需要展开的group的id。<br/>当groupid未指定时展开所有的group。 | | expandGroup | {&nbsp;groupid:&nbsp;string&nbsp;} | 展开指定的group。<br/>groupid：需要展开的group的id。<br/>当groupid未指定时展开所有的group。 |
| currentOffset | - | 返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表 currentOffset返回对象属性说明。 | | currentOffset | - | 返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表 currentOffset返回对象属性说明。 |
**表1** currentOffset返回对象属性说明 **表1** currentOffset返回对象属性说明
| 名称 | 类型 | 备注 | | 名称 | 类型 | 备注 |
| -------- | -------- | -------- | | ---- | ------ | ---------------- |
| x | number | 当前x轴滑动偏移量，单位为px。 | | x | number | 当前x轴滑动偏移量，单位为px。 |
| y | number | 当前y轴滑动偏移量，单位为px。 | | y | number | 当前y轴滑动偏移量，单位为px。 |
## 示例 ## 示例
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<list class="todo-wrapper"> <list class="todo-wrapper">
...@@ -111,23 +111,7 @@ ...@@ -111,23 +111,7 @@
</list> </list>
</div> </div>
``` ```
```css
```
// index.js
export default {
data: {
todolist: [{
title: '刷题',
date: '2021-12-31 10:00:00',
}, {
title: '看电影',
date: '2021-12-31 20:00:00',
}],
},
}
```
```
/* index.css */ /* index.css */
.container { .container {
display: flex; display: flex;
...@@ -152,4 +136,21 @@ export default { ...@@ -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) ![zh-cn_image_0000001185033226](figures/zh-cn_image_0000001185033226.png)
zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md
浏览文件 @ 62e0baeb
...@@ -82,65 +82,70 @@ ...@@ -82,65 +82,70 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<div class="btn-div"> <div class="btn-div">
<button type="capsule" value="Click here" onclick="showPanel"></button> <button type="capsule" value="Click here" onclick="showPanel"></button>
</div>
<panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Close" onclick="closePanel"></button>
</div>
</div> </div>
</panel> <panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{ modeFlag }} mode</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Close" onclick="closePanel"></button>
</div>
</div>
</panel>
</div> </div>
``` ```
``` ```js
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.btn-div { .btn-div {
width: 100%; width: 100%;
height: 200px; height: 200px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.txt { .txt {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
font-size: 39px; font-size: 39px;
} }
.panel-div { .panel-div {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.inner-txt { .inner-txt {
width: 100%; width: 100%;
height: 160px; height: 160px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.inner-btn { .inner-btn {
width: 100%; width: 100%;
height: 120px; height: 120px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
浏览文件 @ 62e0baeb
# popup # popup
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。 气泡指示。给控件绑定气泡弹窗，并在点击控件或者调用气泡弹窗显示方法后弹出相应的气泡提示来引导用户进行操作。
## 权限列表 ## 权限列表
...@@ -21,13 +21,13 @@ ...@@ -21,13 +21,13 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| target | string | - | 是 | 目标元素的id属性值，不支持动态切换。 | | target | string | - | 是 | popup绑定目标元素的id属性值，不支持动态切换。 |
| placement | string | bottom | 否 | 弹出窗口位置。可选值为：<br/>-&nbsp;left：位于目标元素左边；<br/>-&nbsp;right：位于目标元素右边；<br/>-&nbsp;top：位于目标元素上边；<br/>-&nbsp;bottom：位于目标元素下边；<br/>-&nbsp;topLeft：位于目标元素左上角；<br/>-&nbsp;topRight：位于目标元素右上角；<br/>-&nbsp;bottomLeft：位于目标元素左下角；<br/>-&nbsp;bottomRight：位于目标元素右下角。 | | placement | string | bottom | 否 | popup相对于目标元素的位置。可选值为：<br/>-&nbsp;left：位于目标元素左边；<br/>-&nbsp;right：位于目标元素右边；<br/>-&nbsp;top：位于目标元素上边；<br/>-&nbsp;bottom：位于目标元素下边；<br/>-&nbsp;topLeft：位于目标元素左上角；<br/>-&nbsp;topRight：位于目标元素右上角；<br/>-&nbsp;bottomLeft：位于目标元素左下角；<br/>-&nbsp;bottomRight：位于目标元素右下角。 |
| keepalive<sup>5+</sup> | boolean | false | 否 | 设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。 | | keepalive<sup>5+</sup> | boolean | false | 否 | 设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。 |
| clickable<sup>5+</sup> | boolean | true | 否 | popup是否使用点击弹窗，当设置为false时，只支持方法调用显示。 | | clickable<sup>5+</sup> | boolean | true | 否 | popup是否支持点击目标元素弹窗，当设置为false时，只支持方法调用显示弹窗。 |
| arrowoffset<sup>5+</sup> | &lt;length&gt; | 0 | 否 | popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。 | | arrowoffset<sup>5+</sup> | &lt;length&gt; | 0 | 否 | popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> - 不支持focusable属性。 > - 不支持focusable属性。
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| mask-color | &lt;color&gt; | - | 否 | 遮罩层的颜色，默认值为全透明。 | | mask-color | &lt;color&gt; | - | 否 | 遮罩层的颜色，默认值为全透明。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> - 不支持position相关样式。 > - 不支持position相关样式。
...@@ -61,9 +61,9 @@ ...@@ -61,9 +61,9 @@
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| show<sup>5+</sup> | - | 弹出气泡提示。 | | show<sup>5+</sup> | - | 弹出气泡提示。 |
| hide<sup>5+</sup> | - | 取消气泡提示。 | | hide<sup>5+</sup> | - | 隐藏气泡提示。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 1. popup气泡弹窗属性、样式均不支持动态更新。 > 1. popup气泡弹窗属性、样式均不支持动态更新。
> >
> 2. popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。 > 2. popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text id="text">Click to show the pop-up</text> <text id="text">Click to show the pop-up</text>
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -108,14 +108,14 @@ ...@@ -108,14 +108,14 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
visibilitychange(e) { visibilitychange(e) {
prompt.showToast({ prompt.showToast({
message: 'visibility change visibility: ' + e.visibility, message: 'visibility change visibility: ' + e.visibility,
duration: 3000, duration: 3000
}); });
}, },
showpopup() { showpopup() {
...@@ -123,7 +123,7 @@ export default { ...@@ -123,7 +123,7 @@ export default {
}, },
hidepopup() { hidepopup() {
this.$element("popup").hide(); this.$element("popup").hide();
}, }
} }
``` ```
......
zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md
浏览文件 @ 62e0baeb
# refresh # refresh
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
下拉刷新容器。 下拉刷新容器。
...@@ -22,9 +22,9 @@ ...@@ -22,9 +22,9 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| offset | &lt;length&gt; | - | 否 | 刷新组件静止时距离父组件顶部的距离。 | | offset | &lt;length&gt; | - | 否 | 刷新组件静止时距离父组件顶部的距离。 |
| refreshing | boolean | false | 否 | 用于标识刷新组件当前是否正在刷新。 | | refreshing | boolean | false | 否 | 标识刷新组件当前是否正在刷新。 |
| type | string | auto | 否 | 设置组件刷新时的动效。两个可选值，不支持动态修改。<br/>-&nbsp;auto:&nbsp;默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。<br/>-&nbsp;pulldown:&nbsp;列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。 | | type | string | auto | 否 | 设置组件刷新时的动效。两个可选值，不支持动态修改。<br/>-&nbsp;auto:&nbsp;默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。<br/>-&nbsp;pulldown:&nbsp;列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。 |
| lasttime | boolean | false | 否 | 是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX&nbsp;”，XXXX&nbsp;按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。 | | lasttime | boolean | false | 否 | 设置是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX&nbsp;”，XXXX&nbsp;按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。 |
| timeoffset<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置更新时间距离父组件顶部的距离。 | | timeoffset<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置更新时间距离父组件顶部的距离。 |
| friction | number | 42 | 否 | 下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。 | | friction | number | 42 | 否 | 下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。 |
...@@ -35,8 +35,8 @@ ...@@ -35,8 +35,8 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| background-color | &lt;color&gt; | white<br/> | 否 | 用于设置刷新组件的背景颜色。 | | background-color | &lt;color&gt; | white<br/> | 否 | 设置刷新组件的背景颜色。 |
| progress-color | &lt;color&gt; | black<br/> | 否 | 用于设置刷新组件的loading颜色。 | | progress-color | &lt;color&gt; | black<br/> | 否 | 设置刷新组件的loading图标颜色。 |
## 事件 ## 事件
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh"> <refresh refreshing="{{fresh}}" onrefresh="refresh">
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
浏览文件 @ 62e0baeb
# stepper # stepper
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。 步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。
...@@ -15,141 +15,177 @@ ...@@ -15,141 +15,177 @@
仅支持&lt;stepper-item&gt;子组件。 仅支持&lt;stepper-item&gt;子组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 步骤导航器内的步骤顺序按照子组件&lt;stepper-item&gt;的顺序进行排序。 > 步骤导航器内的步骤顺序按照子组件&lt;stepper-item&gt;的顺序进行排序。
## 属性 ## 属性
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../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)。 支持[通用样式](../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)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------ | ---------------------------------------- | ---------------------------------------- |
| finish | 无 | 当步骤导航器最后一个步骤完成时触发该事件。 | | finish | 无 | 当步骤导航器最后一个步骤完成时,触发该事件。 |
| skip | 无 | 当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。 | | skip | 无 | 当前步骤导航器下一步按钮状态为skip，即可跳过时，点击右侧跳过按钮触发该事件。 |
| change | {&nbsp;prevIndex：prevIndex,&nbsp;index:&nbsp;index} | 当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 | | change | {&nbsp;prevIndex：prevIndex,&nbsp;index:&nbsp;index} | 当用户点击步骤导航器的左边或者右边按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 |
| next | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 | | next | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将要跳转的序号，该事件有返回值，返回值格式为：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 |
| back | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 | | back | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将要跳转的序号，该事件有返回值，返回值格式为Object：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 |
## 方法 ## 方法
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，支持如下方法： 除支持[通用方法](../arkui-js/js-components-common-methods.md)外，支持如下方法：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------------- | ---------------------------------------- | ---------------------------------------- |
| setNextButtonStatus | {&nbsp;status:&nbsp;string,&nbsp;label:&nbsp;label&nbsp;} | 设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：<br/>1.&nbsp;normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；<br/>2.&nbsp;disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；<br/>3.&nbsp;waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。<br/>4.&nbsp;skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 | | setNextButtonStatus | {&nbsp;status:&nbsp;string,&nbsp;label:&nbsp;label&nbsp;} | 设置当前步骤中下一步按钮的文本与状态，参数中label为指定按钮文本，status指定按钮状态，status可选值为：<br/>-&nbsp;normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；<br/>-&nbsp;disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；<br/>-&nbsp;waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。<br/>-&nbsp;skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class = "container"> <div class="container">
<stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick"> <stepper class="stepper" id="mystepper" onnext="nextclick" onback="backclick" onchange="statuschange"
<stepper-item class ="stepperItem" label="{{label_1}}"> onfinish="finish" onskip="skip" style="height : 100%;">
<div class = "stepperItemContent" > <stepper-item class="stepper-item" label="{{ label_1 }}">
<text class = "text">First screen</text> <div class="item">
</div> <text>Page One</text>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
</stepper-item> </div>
<stepper-item class ="stepperItem" label="{{label_2}}"> </stepper-item>
<div class = "stepperItemContent" > <stepper-item class="stepper-item" label="{{ label_2 }}">
<text class = "text">Second screen</text> <div class="item">
</div> <text>Page Two</text>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
</stepper-item> </div>
<stepper-item class ="stepperItem" label="{{label_3}}"> </stepper-item>
<div class = "stepperItemContent" > <stepper-item class="stepper-item" label="{{ label_3 }}">
<text class = "text">Third screen</text> <div class="item">
</div> <text>Page Three</text>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
</stepper-item> </div>
</stepper> </stepper-item>
</stepper>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
margin-top: 20px; flex-direction: column;
flex-direction: column; align-items: center;
align-items: center; height: 100%;
height: 300px; width: 100%;
background-color: #f7f7f7;
}
.stepper{
width: 100%;
height: 100%;
}
.stepper-item {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
} }
.stepperItem { .item{
width: 100%; width: 90%;
flex-direction: column; height: 86%;
align-items: center; margin-top: 80px;
background-color: white;
border-radius: 60px;
flex-direction: column;
align-items: center;
padding-top: 160px;
} }
.stepperItemContent { text {
color: #0000ff; font-size: 78px;
font-size: 50px; color: #182431;
justify-content: center; opacity: 0.4;
} }
.button { .button {
width: 60%; width: 40%;
margin-top: 30px; margin-top: 100px;
justify-content: center; justify-content: center;
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt';
export default { export default {
data: { data: {
label_1: label_1:
{ {
prevLabel: 'BACK', prevLabel: 'BACK',
nextLabel: 'NEXT', nextLabel: 'NEXT',
status: 'normal' status: 'normal'
}, },
label_2: label_2:
{ {
prevLabel: 'BACK', prevLabel: 'BACK',
nextLabel: 'NEXT', nextLabel: 'NEXT',
status: 'normal' status: 'normal'
}, },
label_3: label_3:
{ {
prevLabel: 'BACK', prevLabel: 'BACK',
nextLabel: 'NEXT', nextLabel: 'NEXT',
status: 'normal' status: 'normal'
}, }
}, },
setRightButton(e) { setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'}); this.$element('mystepper').setNextButtonStatus({
}, status: 'waiting', label: 'SKIP'
nextclick(e) { });
var index = { },
pendingIndex: e.pendingIndex nextclick(e) {
} var index = {
return index; pendingIndex: e.pendingIndex
}, }
backclick(e) { return index;
var index = { },
pendingIndex: e.pendingIndex 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)
zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md
浏览文件 @ 62e0baeb
...@@ -12,7 +12,7 @@ tab页签容器。 ...@@ -12,7 +12,7 @@ tab页签容器。
## 子组件 ## 子组件
仅支持最多一个&lt;[tab-bar](../arkui-js/js-components-container-tab-bar.md)&gt;和最多一个&lt;[tab-content](../arkui-js/js-components-container-tab-content.md)&gt;。 仅支持&lt;[tab-bar](../arkui-js/js-components-container-tab-bar.md)&gt;和&lt;[tab-content](../arkui-js/js-components-container-tab-content.md)&gt;。
## 属性 ## 属性
......
zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md
浏览文件 @ 62e0baeb
...@@ -37,10 +37,8 @@ export default { ...@@ -37,10 +37,8 @@ export default {
console.log("组件创建") console.log("组件创建")
}, },
onAttached() { onAttached() {
this.value = "组件挂载" this.value = "组件挂载",
}, console.log("组件挂载")
onDetached() {
this.value = ""
}, },
onShow() { onShow() {
console.log("Page显示") console.log("Page显示")
......
zh-cn/application-dev/reference/arkui-js/js-components-media-video.md
浏览文件 @ 62e0baeb
...@@ -5,15 +5,6 @@ ...@@ -5,15 +5,6 @@
> >
> - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> >
> - 需要在config.json对应的"abilities"中设置"configChanges"属性为"orientation"
> ```
> "abilities": [
> {
> "configChanges": ["orientation"],
> ...
> }
> ]
> ```
视频播放组件。 视频播放组件。
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md
浏览文件 @ 62e0baeb
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path> <path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path> <path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"> <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,160,100 160,0 c0,-100,-160,100 -160,0 z"> <animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z">
</animateMotion> </animateMotion>
</path> </path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"> <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md
浏览文件 @ 62e0baeb
...@@ -193,6 +193,7 @@ transform动效，支持的组件范围： ...@@ -193,6 +193,7 @@ transform动效，支持的组件范围：
dur="3s" repeatCount="indefinite"></animateTransform> dur="3s" repeatCount="indefinite"></animateTransform>
</rect> </rect>
<text x="20" y="700" fill="#D2691E" font-size="40"> <text x="20" y="700" fill="#D2691E" font-size="40">
animate-transform
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
dur="3s" repeatCount="indefinite"></animateTransform> dur="3s" repeatCount="indefinite"></animateTransform>
</text> </text>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ 62e0baeb
...@@ -97,9 +97,9 @@ textpath与tspan组合示例与效果图 ...@@ -97,9 +97,9 @@ textpath与tspan组合示例与效果图
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
<path d="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600" stroke="red" fill="none"></path> <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path>
<text> <text>
<textpath fill="#D2691E" path="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600"font-size="30px" stroke="black" stroke-width="1" > <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px" stroke="black" stroke-width="1" >
This is TextPath. This is TextPath.
<tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan> <tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan>
<tspan font-size="30px">Let's play.</tspan> <tspan font-size="30px">Let's play.</tspan>
...@@ -117,11 +117,11 @@ textpath与tspan组合示例与效果图 ...@@ -117,11 +117,11 @@ textpath与tspan组合示例与效果图
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
<path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none"> <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
</path> </path>
<!-- 数值百分比 --> <!-- 数值百分比 -->
<text> <text>
<textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan x="50" fill="blue">This is first tspan.</tspan> <tspan x="50" fill="blue">This is first tspan.</tspan>
<tspan x="50%">This is second tspan.</tspan> <tspan x="50%">This is second tspan.</tspan>
...@@ -172,10 +172,10 @@ textpath与tspan组合属性动画与效果图 ...@@ -172,10 +172,10 @@ textpath与tspan组合属性动画与效果图
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
<path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none"> <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
</path> </path>
<text> <text>
<textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan x="50" fill="blue"> <tspan x="50" fill="blue">
tspan attribute x|rotate tspan attribute x|rotate
...@@ -209,11 +209,11 @@ textpath与tspan组合属性动画与效果图 ...@@ -209,11 +209,11 @@ textpath与tspan组合属性动画与效果图
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
<path d="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" stroke="red" <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red"
fill="none"> fill="none">
</path> </path>
<text> <text>
<textpath fill="#D2691E" path="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan dx="20" fill="blue"> <tspan dx="20" fill="blue">
tspan attribute fill|fill-opacity tspan attribute fill|fill-opacity
...@@ -247,11 +247,11 @@ textpath与tspan组合属性动画与效果图 ...@@ -247,11 +247,11 @@ textpath与tspan组合属性动画与效果图
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
<path d="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" stroke="red" <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red"
fill="none"> fill="none">
</path> </path>
<text> <text>
<textpath fill="#D2691E" path="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan dx="20" fill="blue"> <tspan dx="20" fill="blue">
tspan attribute stroke tspan attribute stroke
......
zh-cn/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ 62e0baeb
...@@ -15,7 +15,7 @@ ...@@ -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)。
## 属性 ## 属性
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 62e0baeb
...@@ -16,7 +16,7 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb ...@@ -16,7 +16,7 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb
| --------- | ------------ | ---- | ------------------------------------------------------------ | | --------- | ------------ | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发拖动的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 | | fingers | number | 否 | 触发拖动的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 |
| direction | PanDirection | 否 | 触发拖动的手势方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。<br/>默认值：PanDirection.All | | direction | PanDirection | 否 | 触发拖动的手势方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。<br/>默认值：PanDirection.All |
| distance | number | 否 | 最小拖动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 | | distance | number | 否 | 最小拖动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> [Tabs组件](ts-container-tabs.md)滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
## PanDirection枚举说明 ## PanDirection枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 62e0baeb
...@@ -45,7 +45,7 @@ struct RotationGestureExample { ...@@ -45,7 +45,7 @@ struct RotationGestureExample {
.padding(20) .padding(20)
.border({ width: 3 }) .border({ width: 3 })
.margin(80) .margin(80)
.rotate({ angle: this.angle }) .rotate({ z: 1, angle: this.angle })
// 双指旋转触发该手势事件 // 双指旋转触发该手势事件
.gesture( .gesture(
RotationGesture() RotationGesture()
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 62e0baeb
...@@ -52,7 +52,7 @@ struct SwipeGestureExample { ...@@ -52,7 +52,7 @@ struct SwipeGestureExample {
.width(300) .width(300)
.height(200) .height(200)
.margin(100) .margin(100)
.rotate({ angle: this.rotateAngle }) .rotate({ z: 1, angle: this.rotateAngle })
// 单指竖直方向滑动时触发该事件 // 单指竖直方向滑动时触发该事件
.gesture( .gesture(
SwipeGesture({ direction: SwipeDirection.Vertical }) SwipeGesture({ direction: SwipeDirection.Vertical })
......
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 62e0baeb
...@@ -305,9 +305,7 @@ struct CanvasExample { ...@@ -305,9 +305,7 @@ struct CanvasExample {
this.context.moveTo(140, 10) this.context.moveTo(140, 10)
this.context.lineTo(140, 160) this.context.lineTo(140, 160)
this.context.stroke() this.context.stroke()
this.context.font = '18px sans-serif' this.context.font = '18px sans-serif'
this.context.textAlign = 'start' this.context.textAlign = 'start'
this.context.fillText('textAlign=start', 140, 60) this.context.fillText('textAlign=start', 140, 60)
this.context.textAlign = 'end' this.context.textAlign = 'end'
...@@ -350,9 +348,7 @@ struct TextBaseline { ...@@ -350,9 +348,7 @@ struct TextBaseline {
this.context.moveTo(0, 120) this.context.moveTo(0, 120)
this.context.lineTo(400, 120) this.context.lineTo(400, 120)
this.context.stroke() this.context.stroke()
this.context.font = '20px sans-serif' this.context.font = '20px sans-serif'
this.context.textBaseline = 'top' this.context.textBaseline = 'top'
this.context.fillText('Top', 10, 120) this.context.fillText('Top', 10, 120)
this.context.textBaseline = 'bottom' this.context.textBaseline = 'bottom'
...@@ -426,7 +422,7 @@ struct LineDashOffset { ...@@ -426,7 +422,7 @@ struct LineDashOffset {
.onReady(() =>{ .onReady(() =>{
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0; this.context.lineDashOffset = 10.0
this.context.stroke(); this.context.stroke();
}) })
} }
...@@ -498,8 +494,8 @@ struct GlobalCompositeOperation { ...@@ -498,8 +494,8 @@ struct GlobalCompositeOperation {
@Entry @Entry
@Component @Component
struct ShadowBlur { struct ShadowBlur {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -765,8 +761,8 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -765,8 +761,8 @@ clearRect(x: number, y: number, w: number, h: number): void
@Entry @Entry
@Component @Component
struct ClearRect { struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -808,8 +804,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void ...@@ -808,8 +804,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
@Entry @Entry
@Component @Component
struct FillText { struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -853,8 +849,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void ...@@ -853,8 +849,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
@Entry @Entry
@Component @Component
struct StrokeText { struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -922,8 +918,8 @@ measureText(text: string): TextMetrics ...@@ -922,8 +918,8 @@ measureText(text: string): TextMetrics
@Entry @Entry
@Component @Component
struct MeasureText { struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1284,8 +1280,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1284,8 +1280,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1294,10 +1290,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1294,10 +1290,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.beginPath(); this.context.beginPath()
this.context.moveTo(20, 20); this.context.moveTo(20, 20)
this.context.quadraticCurveTo(100, 100, 200, 20); this.context.quadraticCurveTo(100, 100, 200, 20)
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -1390,9 +1386,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1390,9 +1386,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.moveTo(100, 20); this.context.moveTo(100, 20)
this.context.arcTo(150, 20, 150, 70, 50); this.context.arcTo(150, 20, 150, 70, 50)
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -1571,17 +1567,17 @@ struct Fill { ...@@ -1571,17 +1567,17 @@ struct Fill {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.moveTo(30, 90); region.moveTo(30, 90)
region.lineTo(110, 20); region.lineTo(110, 20)
region.lineTo(240, 130); region.lineTo(240, 130)
region.lineTo(60, 130); region.lineTo(60, 130)
region.lineTo(190, 20); region.lineTo(190, 20)
region.lineTo(270, 90); region.lineTo(270, 90)
region.closePath(); region.closePath()
// Fill path // Fill path
this.context.fillStyle = 'green'; this.context.fillStyle = 'green'
this.context.fill(region, "evenodd"); this.context.fill(region, "evenodd")
}) })
} }
.width('100%') .width('100%')
...@@ -1666,9 +1662,9 @@ struct Clip { ...@@ -1666,9 +1662,9 @@ struct Clip {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.rect(80,10,20,130); region.rect(80,10,20,130)
region.rect(40,50,100,50); region.rect(40,50,100,50)
this.context.clip(region,"evenodd") this.context.clip(region,"evenodd")
this.context.fillStyle = "rgb(255,0,0)" this.context.fillStyle = "rgb(255,0,0)"
this.context.fillRect(0, 0, this.context.width, this.context.height) 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: ...@@ -1995,9 +1991,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
@Entry @Entry
@Component @Component
struct ImageExample { struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 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: ...@@ -2006,7 +2002,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .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%') .width('100%')
...@@ -2099,8 +2095,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData ...@@ -2099,8 +2095,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
@Entry @Entry
@Component @Component
struct GetImageData { struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() { build() {
...@@ -2110,9 +2106,9 @@ struct GetImageData { ...@@ -2110,9 +2106,9 @@ struct GetImageData {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage(this.img,0,0,130,130); this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130); var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150); this.context.putImageData(imagedata,150,150)
}) })
} }
.width('100%') .width('100%')
...@@ -2379,7 +2375,7 @@ struct ToDataURL { ...@@ -2379,7 +2375,7 @@ struct ToDataURL {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var dataURL = this.context.toDataURL(); var dataURL = this.context.toDataURL()
}) })
} }
.width('100%') .width('100%')
...@@ -2413,11 +2409,11 @@ restore(): void ...@@ -2413,11 +2409,11 @@ restore(): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.save(); // save the default state this.context.save() // save the default state
this.context.fillStyle = "green"; this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100); this.context.fillRect(20, 20, 100, 100)
this.context.restore(); // restore to the default state this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100); this.context.fillRect(150, 75, 100, 100)
}) })
} }
.width('100%') .width('100%')
...@@ -2451,11 +2447,11 @@ save(): void ...@@ -2451,11 +2447,11 @@ save(): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.save(); // save the default state this.context.save() // save the default state
this.context.fillStyle = "green"; this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100); this.context.fillRect(20, 20, 100, 100)
this.context.restore(); // restore to the default state this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100); this.context.fillRect(150, 75, 100, 100)
}) })
} }
.width('100%') .width('100%')
......
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 62e0baeb
...@@ -61,7 +61,7 @@ struct GestureGroupExample { ...@@ -61,7 +61,7 @@ struct GestureGroupExample {
.margin(20) .margin(20)
.border({ width: 3, style: this.borderStyles }) .border({ width: 3, style: this.borderStyles })
.gesture( .gesture(
//以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件 // 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
GestureGroup(GestureMode.Sequence, GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true }) LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 62e0baeb
...@@ -17,40 +17,41 @@ addColorStop(offset: number, color: string): void ...@@ -17,40 +17,41 @@ addColorStop(offset: number, color: string): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | --------- | ---------------------------- | | ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 | | offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 是 | '#ffffff' | 设置渐变的颜色。 | | color | string | 是 | '#ffffff' | 设置渐变的颜色。 |
**示例：** **示例：**
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct Page45 { struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() => {
var grad = this.context.createLinearGradient(50,0, 300,100) var grad = this.context.createLinearGradient(50, 0, 300, 100)
grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, 'green')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
}} }
}
``` ```
![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png) ![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png)
......
zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md
浏览文件 @ 62e0baeb
...@@ -37,7 +37,7 @@ Navigator(value?: {target: string, type?: NavigationType}) ...@@ -37,7 +37,7 @@ Navigator(value?: {target: string, type?: NavigationType})
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| ------ | ------- | ------------------------------------------------------------ | | ------ | ------- | ------------------------------------------------------------ |
| active | boolean | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 | | 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文件中。 | | target | string | 设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。 |
| type | [NavigationType](#navigationtype枚举说明) | 设置路由方式。<br/>默认值：NavigationType.Push | | type | [NavigationType](#navigationtype枚举说明) | 设置路由方式。<br/>默认值：NavigationType.Push |
......
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ 62e0baeb
...@@ -22,30 +22,30 @@ Scroll(scroller?: Scroller) ...@@ -22,30 +22,30 @@ Scroll(scroller?: Scroller)
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | --------- | | -------------- | ---------------------------------------- | ---------------------------------------- |
| scrollable | [ScrollDirection](#scrolldirection枚举说明) | 设置滚动方向。<br/>默认值：ScrollDirection.Vertical | | scrollable | [ScrollDirection](#scrolldirection枚举说明) | 设置滚动方向。<br/>默认值：ScrollDirection.Vertical |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值：BarState.Auto | | scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值：BarState.Auto |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 | | scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 |
| scrollBarWidth | string&nbsp;\|&nbsp;number | 设置滚动条的宽度。 | | scrollBarWidth | string&nbsp;\|&nbsp;number | 设置滚动条的宽度。 |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值：EdgeEffect.None | | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值：EdgeEffect.None |
## ScrollDirection枚举说明 ## ScrollDirection枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ---------- | ------------------------ | | ---------------------------- | ----------------------------------- |
| Horizontal | 仅支持水平方向滚动。 | | Horizontal | 仅支持水平方向滚动。 |
| Vertical | 仅支持竖直方向滚动。 | | Vertical | 仅支持竖直方向滚动。 |
| None | 不可滚动。 | | None | 不可滚动。 |
| Free<sup>(deprecated) </sup> | 支持竖直或水平方向滚动<br/> 从API version 9开始废弃| | Free<sup>(deprecated) </sup> | 支持竖直或水平方向滚动<br/> 从API version 9开始废弃 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ---------------------------------------- | ---------------------------------------- |
| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | 滚动开始事件回调。<br>参数：<br>- dx：即将发生的水平方向滚动量。<br>- dy：即将发生的竖直方向滚动量。<br>返回值：<br>- dxRemain：水平方向滚动剩余量。<br>- dyRemain：竖直方向滚动剩余量。 | | onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | 滚动开始事件回调。<br>参数：<br>- dx：即将发生的水平方向滚动量。<br>- dy：即将发生的竖直方向滚动量。<br>返回值：<br>- dxRemain：水平方向滚动剩余量。<br>- dyRemain：竖直方向滚动剩余量。 |
| onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调,&nbsp;返回滚动时水平、竖直方向偏移量。 | | onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调,&nbsp;返回滚动时水平、竖直方向偏移量。 |
| onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。 | | onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。 |
| onScrollEnd(event: () => void) | 滚动停止事件回调。 | | onScrollEnd(event: () => void) | 滚动停止事件回调。 |
> **说明：** > **说明：**
> >
...@@ -72,11 +72,11 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation? ...@@ -72,11 +72,11 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| xOffset | Length | 是 | 水平滑动偏移。 | | xOffset | Length | 是 | 水平滑动偏移。 |
| yOffset | Length | 是 | 竖直滑动偏移。 | | yOffset | Length | 是 | 竖直滑动偏移。 |
| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)<br/>} | 否 | 动画配置：<br/>-&nbsp;duration:&nbsp;滚动时长设置。<br/>-&nbsp;curve:&nbsp;滚动曲线设置。 | | animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)<br/>} | 否 | 动画配置：<br/>-&nbsp;duration:&nbsp;滚动时长设置。<br/>-&nbsp;curve:&nbsp;滚动曲线设置。 |
### scrollEdge ### scrollEdge
...@@ -88,8 +88,8 @@ scrollEdge(value: Edge): void ...@@ -88,8 +88,8 @@ scrollEdge(value: Edge): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ---- | ---- | --------- | | ----- | --------------------------------- | ---- | --------- |
| value | [Edge](ts-appendix-enums.md#edge) | 是 | 滚动到的边缘位置。 | | value | [Edge](ts-appendix-enums.md#edge) | 是 | 滚动到的边缘位置。 |
...@@ -101,10 +101,10 @@ scrollPage(value: { next: boolean, direction?: Axis }): void ...@@ -101,10 +101,10 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| --------- | ------- | ---- | ------------------------------ | | --------------------------------- | --------------------------------- | ---- | --------------------------------------- |
| next | boolean | 是 | 是否向下翻页。true表示向下翻页，false表示向上翻页。 | | next | boolean | 是 | 是否向下翻页。true表示向下翻页，false表示向上翻页。 |
| direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滚动方向为水平或竖直方向。<br/> 从API version 9开始废弃 | | direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滚动方向为水平或竖直方向。<br/> 从API version 9开始废弃 |
### currentOffset ### currentOffset
...@@ -135,9 +135,9 @@ scrollToIndex(value: number): void ...@@ -135,9 +135,9 @@ scrollToIndex(value: number): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ---------------------------------- | | ----- | ------ | ---- | ----------------- |
| value | number | 是 | 要滑动到的列表项在列表中的索引值。 | | value | number | 是 | 要滑动到的列表项在列表中的索引值。 |
### scrollBy<sup>9+</sup> ### scrollBy<sup>9+</sup>
...@@ -154,10 +154,10 @@ scrollBy(dx: Length, dy: Length): void ...@@ -154,10 +154,10 @@ scrollBy(dx: Length, dy: Length): void
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ----------------- | | ---- | ------ | ---- | ------------------ |
| dx | Length | 是 | 水平方向滚动距离，不支持百分比形式。 | | dx | Length | 是 | 水平方向滚动距离，不支持百分比形式。 |
| dy | Length | 是 | 竖直方向滚动距离，不支持百分比形式。 | | dy | Length | 是 | 竖直方向滚动距离，不支持百分比形式。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 62e0baeb
...@@ -21,7 +21,8 @@ ...@@ -21,7 +21,8 @@
Circle(options?: {width?: string | number, height?: string | number}) Circle(options?: {width?: string | number, height?: string | number})
## 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 | | width | string \| number | 否 | 0 | 宽度。 |
...@@ -32,19 +33,19 @@ Circle(options?: {width?: string | number, height?: string | number}) ...@@ -32,19 +33,19 @@ Circle(options?: {width?: string | number, height?: string | number})
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置边框颜色，不设置时，默认没有边框。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 | | strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 | | strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置斜接长度与边框宽度比值的极限值。<br/>**说明：**<br/>Circle组件无法设置尖角图形，该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 | | strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置边框透明度。<br/>**说明：**<br/>该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 |
| strokeWidth | Length | 1 | 否 | 设置边框宽度。 | | strokeWidth | Length | 1 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 是否开启抗锯齿效果。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ 62e0baeb
...@@ -22,30 +22,31 @@ ...@@ -22,30 +22,31 @@
ellipse(options?: {width?: string | number, height?: string | number}) 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)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 |设置边框颜色，不设置时，默认没有边框。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - |设置边框颜色，不设置时，默认没有边框。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 | | strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 | | strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置斜接长度与边框宽度比值的极限值。<br/>**说明：**<br/>Ellipse组件无法设置尖角图形，该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 | | strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置边框透明度。<br/>**说明：**<br/>该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 |
| strokeWidth | Length | 1 | 否 | 设置边框宽度。 | | strokeWidth | Length | 1 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 是否开启抗锯齿效果。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ 62e0baeb
...@@ -21,32 +21,33 @@ ...@@ -21,32 +21,33 @@
Line(options?: {width?: string | number, height?: string | number}) 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)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| startPoint | Array | [0,&nbsp;0] | 是 | 直线起点坐标点(相对坐标)。 | | startPoint | Array | [0,&nbsp;0] | 直线起点坐标点(相对坐标)。 |
| endPoint | Array | [0,&nbsp;0] | 是 | 直线终点坐标点(相对坐标)。 | | endPoint | Array | [0,&nbsp;0] | 直线终点坐标点(相对坐标)。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。<br/>**说明：**<br/>Line组件无法形成闭合区域，该属性设置无效。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。<br/>**说明：**<br/>Line组件无法形成闭合区域，该属性设置无效。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 | | strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。<br/>**说明：**<br/>Line组件无法设置锐角图形，该属性设置无效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | | strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置线条透明度。<br/>**说明：**<br/>该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | | strokeWidth | Length | 1 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 是否开启抗锯齿效果。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 62e0baeb
...@@ -16,34 +16,34 @@ ...@@ -16,34 +16,34 @@
Path(value?: { width?: number | string; height?: number | string; commands?: string }) 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)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- | | -------- | ----------------------------------- | ---- | ---------------------------------------- |
| commands | string | '' | 否 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 | | commands | string | '' | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 | | strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。<br/>**说明：**<br/>该属性取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | | strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置线条透明度。<br/>**说明：**<br/>该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | | strokeWidth | Length | 1 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 是否开启抗锯齿效果。 |
commands支持的绘制命令如下： commands支持的绘制命令如下：
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 62e0baeb
...@@ -21,29 +21,30 @@ ...@@ -21,29 +21,30 @@
Polygon(options?: {width?: string | number, height?: string | number}) 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)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | 否 | 多边形的顶点坐标列表。 | | points | Array&lt;Point&gt; | [] | 否 | 多边形的顶点坐标列表。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 | | strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 | | strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。<br/>**说明：**<br/>该属性取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 | | strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。<br/>**说明：**<br/>该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 |
| strokeWidth | Length | 1 | 否 | 设置边框宽度。 | | strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ 62e0baeb
...@@ -22,31 +22,32 @@ ...@@ -22,31 +22,32 @@
Polyline(options?: {width?: string | number, height?: string | number}) 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)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | 否 | 折线经过坐标点列表。 | | points | Array&lt;Point&gt; | [] | 折线经过坐标点列表。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 | | strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。<br/>**说明：**<br/>该属性取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | | strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置线条透明度。<br/>**说明：**<br/>该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | | strokeWidth | Length | 1 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 是否开启抗锯齿效果。 |
## Point ## Point
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ 62e0baeb
...@@ -23,36 +23,37 @@ ...@@ -23,36 +23,37 @@
Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} | Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} |
{width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}) {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number})
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| width | string&nbsp;\|&nbsp;number | 否 | 0 | 宽度。 | | -------- | -------- | -------- | -------- | -------- |
| height | string&nbsp;\|&nbsp;number | 否 | 0 | 高度。 | | width | string&nbsp;\|&nbsp;number | 否 | 0 | 宽度。 |
| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 | | height | string&nbsp;\|&nbsp;number | 否 | 0 | 高度。 |
| radiusWidth | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角宽度。 | | radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角高度。 | | radiusWidth | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角宽度。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角高度。 |
## 属性 ## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| radiusWidth | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 | | radiusWidth | string&nbsp;\|&nbsp;number | 0 | 圆角的宽度，仅设置宽时宽高一致。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 | | radiusHeight | string&nbsp;\|&nbsp;number | 0 | 圆角的高度，仅设置高时宽高一致。 |
| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 0 | 否 | 圆角半径大小。 | | radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 0 | 圆角半径大小。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置边框颜色，不设置时，默认没有边框线条。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 | | strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 | | strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。<br/>**说明：**<br/>该属性取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 | | strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置边框透明度。<br/>**说明：**<br/>该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 |
| strokeWidth | Length | 1 | 否 | 设置边框宽度。 | | strokeWidth | Length | 1 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 是否开启抗锯齿效果。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ 62e0baeb
...@@ -25,17 +25,18 @@ ...@@ -25,17 +25,18 @@
Shape(value?: PixelMap) 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)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| viewPort | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>width?:&nbsp;number \| string,<br/>height?:&nbsp;number \| string<br/>} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 | | viewPort | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>width?:&nbsp;number \| string,<br/>height?:&nbsp;number \| string<br/>} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
...@@ -45,8 +46,8 @@ Shape(value?: PixelMap) ...@@ -45,8 +46,8 @@ Shape(value?: PixelMap)
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 | | strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。<br/>**说明：**<br/>该属性取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。 | | strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。<br/>**说明：**<br/>该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 1 | 否 | 设置边框宽度。 | | strokeWidth | number&nbsp;\|&nbsp;string | 1 | 否 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置，第二个参数为mesh矩阵列数column，第三个参数为mesh矩阵行数row。 | | mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置，第二个参数为mesh矩阵列数column，第三个参数为mesh矩阵行数row。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 62e0baeb
...@@ -73,6 +73,23 @@ struct AnimateToExample { ...@@ -73,6 +73,23 @@ struct AnimateToExample {
} }
this.flag = !this.flag 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 }) }.width('100%').margin({ top: 5 })
} }
} }
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
浏览文件 @ 62e0baeb
...@@ -7,11 +7,6 @@ ...@@ -7,11 +7,6 @@
列表弹窗。 列表弹窗。
## 权限
无
## ActionSheet.show ## ActionSheet.show
show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp;|&nbsp;Resource,&nbsp;confirm?: {value: string&nbsp;|&nbsp;Resource,&nbsp;action:() => void},&nbsp;cancel?:()=>void,&nbsp;sheets: Array&lt;SheetInfo&gt;,&nbsp;autoCancel?:boolean,&nbsp;alignment?: DialogAlignment,&nbsp;offset?: { dx: number | string | Resource; dy: number | string | Resource } }) show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp;|&nbsp;Resource,&nbsp;confirm?: {value: string&nbsp;|&nbsp;Resource,&nbsp;action:() => void},&nbsp;cancel?:()=>void,&nbsp;sheets: Array&lt;SheetInfo&gt;,&nbsp;autoCancel?:boolean,&nbsp;alignment?: DialogAlignment,&nbsp;offset?: { dx: number | string | Resource; dy: number | string | Resource } })
...@@ -34,8 +29,8 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp ...@@ -34,8 +29,8 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ----------------- | | ------ | ------------------------------------------------------------ | ---- | ----------------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | 选项的文本内容。 | | title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | 选项的文本内容。 |
| icon | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 否 | 选项的图标，默认无图标显示。 | | icon | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否 | 选项的图标，默认无图标显示。 |
| action | ()=&gt;void | 是 | 选项选中的回调。 | | action | ()=&gt;void | 是 | 选项选中的回调。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md
浏览文件 @ 62e0baeb
...@@ -17,26 +17,38 @@ close(): void ...@@ -17,26 +17,38 @@ close(): void
@Entry @Entry
@Component @Component
struct Index { struct Index {
@Builder MenuBuilder(){ @Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('close') Button('Test ContextMenu1')
.fontSize(30) Divider().strokeWidth(2).margin(5)
.fontWeight(FontWeight.Bold) Button('Test ContextMenu2')
.onClick(() => { Divider().strokeWidth(2).margin(5)
ContextMenu.close(); Button('Test ContextMenu3')
}) }
}.height(400) .width(200)
.backgroundColor(Color.Pink) .height(160)
} }
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Column(){ Column() {
Text("Text") Text("Test ContextMenu")
}.bindContextMenu(this.MenuBuilder, ResponseType.LongPress) .fontSize(20)
.width('100%')
.height(500)
.backgroundColor(0xAFEEEE)
.textAlign(TextAlign.Center)
}
.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
.onDragStart(() => {
// 拖拽时关闭菜单
ContextMenu.close()
})
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
} }
} }
``` ```
![contextmenu_close.gif](figures/contextmenu_close.gif)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ 62e0baeb
...@@ -42,15 +42,27 @@ extraParams是Json对象转换的string字符串，可以通过Json.parse转换 ...@@ -42,15 +42,27 @@ extraParams是Json对象转换的string字符串，可以通过Json.parse转换
```ts ```ts
// xxx.ets // xxx.ets
@Extend(Text) function textStyle () {
.width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
}
@Entry @Entry
@Component @Component
struct DragExample { struct DragExample {
@State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']; @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
@State text: string = ''; @State text: string = ''
@State bool: boolean = false; @State bool: boolean = true
@State appleVisible: Visibility = Visibility.Visible; @State eventType: string = ''
@State orangeVisible: Visibility = Visibility.Visible; @State appleVisible: Visibility = Visibility.Visible
@State bananaVisible: 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() { @Builder pixelMapBuilder() {
...@@ -74,46 +86,29 @@ struct DragExample { ...@@ -74,46 +86,29 @@ struct DragExample {
.textAlign(TextAlign.Start) .textAlign(TextAlign.Start)
.margin(5) .margin(5)
Row({ space: 15 }) { Row({ space: 15 }) {
Text('apple') ForEach(this.dragList, (item, index) => {
.width('25%') Text(item)
.height(35) .textStyle()
.fontSize(16) .visibility(this.fruitVisible[index])
.textAlign(TextAlign.Center) .onDragStart(() => {
.backgroundColor(0xAFEEEE) this.bool = true
.visibility(this.appleVisible) this.text = item
.onDragStart(() => { this.fruitVisible[index] = Visibility.None
this.bool = true; return this.pixelMapBuilder
this.text = 'apple'; })
this.appleVisible = Visibility.None; .onTouch((event: TouchEvent) => {
return this.pixelMapBuilder; if (event.type === TouchType.Down) {
}) this.eventType = 'Down'
Text('orange') this.index = index
.width('25%') }
.height(35) if (event.type === TouchType.Up) {
.fontSize(16) this.eventType = 'Up'
.textAlign(TextAlign.Center) if (this.bool) {
.backgroundColor(0xAFEEEE) this.fruitVisible[index] = Visibility.Visible
.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;
})
}.padding({ top: 10, bottom: 10 }).margin(10) }.padding({ top: 10, bottom: 10 }).margin(10)
Text('This is a List element') Text('This is a List element')
...@@ -142,21 +137,22 @@ struct DragExample { ...@@ -142,21 +137,22 @@ struct DragExample {
.padding(15) .padding(15)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
.onDragEnter((event: DragEvent, extraParams: string) => { .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) => { .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) => { .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) => { .onDrop((event: DragEvent, extraParams: string) => {
var jsonString = JSON.parse(extraParams); let jsonString = JSON.parse(extraParams);
if (this.bool) { if (this.bool) {
// 通过splice方法插入元素 // 通过splice方法插入元素
this.numbers.splice(jsonString.insertIndex, 0, this.text); this.numbers.splice(jsonString.insertIndex, 0, this.text)
this.bool = false; this.bool = false
} }
this.fruitVisible[this.index] = Visibility.None
}) })
}.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
} }
......
zh-cn/application-dev/ui/js-framework-syntax-js.md
浏览文件 @ 62e0baeb
...@@ -31,7 +31,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -31,7 +31,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
示例代码 示例代码
``` ```js
// app.js // app.js
export default { export default {
onCreate() { onCreate() {
...@@ -51,7 +51,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -51,7 +51,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
}; };
``` ```
``` ```js
// index.js页面逻辑代码 // index.js页面逻辑代码
export default { export default {
data: { data: {
...@@ -91,7 +91,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -91,7 +91,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
示例代码 示例代码
``` ```js
// index.js // index.js
export default { export default {
data: { data: {
...@@ -141,7 +141,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -141,7 +141,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
示例： 示例：
``` ```js
this.$rootElement().scrollTo({position: 0}) this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
``` ```
...@@ -150,14 +150,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -150,14 +150,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
## 获取DOM元素 ## 获取DOM元素
1. 通过$refs获取DOM元素 1. 通过$refs获取DOM元素
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div> </div>
``` ```
``` ```js
// index.js // index.js
export default { export default {
data: { data: {
...@@ -182,14 +182,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -182,14 +182,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
``` ```
2. 通过$element获取DOM元素 2. 通过$element获取DOM元素
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="width:500px;height: 700px; margin: 100px;"> <div class="container" style="width:500px;height: 700px; margin: 100px;">
<image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div> </div>
``` ```
``` ```js
// index.js // index.js
export default { export default {
data: { data: {
...@@ -219,7 +219,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -219,7 +219,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
根节点所在页面： 根节点所在页面：
``` ```html
<!-- root.hml --> <!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element> <element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container"> <div class="container">
...@@ -230,7 +230,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 ...@@ -230,7 +230,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
</div> </div>
``` ```
``` ```js
// root.js // root.js
export default { export default {
data: { data: {
...@@ -243,25 +243,25 @@ export default { ...@@ -243,25 +243,25 @@ export default {
自定义parent组件： 自定义parent组件：
``` ```html
<!-- parent.hml --> <!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element> <element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked"> <div class="item" onclick="textClicked">
<text class="text-style" onclick="parentClicked">parent component click</text> <text class="text-style" onclick="parentClicked">parent component click</text>
<text class="text-style" if="{{show}}">hello parent component!</text> <text class="text-style" if="{{showValue}}">hello parent component!</text>
<childComp id = "selfDefineChild"></childComp> <childComp id = "selfDefineChild"></childComp>
</div> </div>
``` ```
``` ```js
// parent.js // parent.js
export default { export default {
data: { data: {
show: false, showValue: false,
text: 'I am parent component!', text: 'I am parent component!',
}, },
parentClicked () { parentClicked () {
this.show = !this.show; this.showValue = !this.showValue
console.info('parent component get parent text'); console.info('parent component get parent text');
console.info(`${this.$parent().text}`); console.info(`${this.$parent().text}`);
console.info("parent component get child function"); console.info("parent component get child function");
...@@ -272,7 +272,7 @@ export default { ...@@ -272,7 +272,7 @@ export default {
自定义child组件： 自定义child组件：
``` ```html
<!-- child.hml --> <!-- child.hml -->
<div class="item" onclick="textClicked"> <div class="item" onclick="textClicked">
<text class="text-style" onclick="childClicked">child component clicked</text> <text class="text-style" onclick="childClicked">child component clicked</text>
...@@ -280,7 +280,7 @@ export default { ...@@ -280,7 +280,7 @@ export default {
</div> </div>
``` ```
``` ```js
// child.js // child.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ts-pixel-units.md
浏览文件 @ 62e0baeb
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
| px | 屏幕物理像素单位。 | | px | 屏幕物理像素单位。 |
| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 | | vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 |
| fp | 字体像素，与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大小。 |
## 像素单位转换 ## 像素单位转换
......
zh-cn/application-dev/ui/ui-js-animate-svg.md
浏览文件 @ 62e0baeb
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。 在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)中，通过path设置动画变化的路径。 在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)中，通过path设置动画变化的路径。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" width="800" height="900"> <svg fill="white" width="800" height="900">
...@@ -65,10 +65,10 @@ ...@@ -65,10 +65,10 @@
## animateTransform动画 ## 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
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style=""> <div class="container" style="">
<svg> <svg>
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
......
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ 62e0baeb
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-830px)得到烟囱。 创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-830px)得到烟囱。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="top"></div> <div class="top"></div>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -38,8 +38,8 @@ ...@@ -38,8 +38,8 @@
height: 428px; height: 428px;
background-color: #860303; background-color: #860303;
transform: rotate(45deg); transform: rotate(45deg);
margin-top: 230px; margin-top: 284px;
margin-left: 266px; margin-left: 148px;
} }
.content{ .content{
margin-top: 500px; margin-top: 500px;
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
width: 100px; width: 100px;
height: 150px; height: 150px;
background-color: #1033d9; background-color: #1033d9;
transform: translate(150px,-150px); transform: translate(150px,-137px);
} }
.window{ .window{
z-index: 1; z-index: 1;
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
height: 100px; height: 100px;
border-radius: 15px; border-radius: 15px;
background-color: #9a7404; background-color: #9a7404;
transform: translate(200px,-830px) skewX(-5deg); transform: translate(200px,-710px) skewX(-5deg);
} }
``` ```
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。 小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="circle"></div> <div class="circle"></div>
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -175,7 +175,7 @@ ...@@ -175,7 +175,7 @@
设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。 设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rotate"> <div class="rotate">
...@@ -194,7 +194,7 @@ ...@@ -194,7 +194,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -252,13 +252,13 @@ ...@@ -252,13 +252,13 @@
.rect4{ .rect4{
width: 100px; width: 100px;
height: 100px; height: 100px;
animation: rotate3d1 17ms infinite; animation: rotate3d1 1000ms infinite;
background: linear-gradient(#e6c4ec, #be15d9) background: linear-gradient(#e6c4ec, #be15d9)
} }
.rect5{ .rect5{
width: 100px; width: 100px;
height: 100px; height: 100px;
animation: rotate3d1 17ms infinite; animation: rotate3d1 1000ms infinite;
margin-left: 100px; margin-left: 100px;
background: linear-gradient(#e6c4ec, #be15d9) background: linear-gradient(#e6c4ec, #be15d9)
} }
...@@ -268,7 +268,7 @@ ...@@ -268,7 +268,7 @@
height: 100px; height: 100px;
border-radius: 50px; border-radius: 50px;
border: 1px solid #e70303; border: 1px solid #e70303;
animation: rotate3d2 17ms infinite; animation: rotate3d2 1000ms infinite;
} }
/* 眼睛的动效 */ /* 眼睛的动效 */
@keyframes rotate3d1{ @keyframes rotate3d1{
...@@ -311,7 +311,7 @@ ...@@ -311,7 +311,7 @@
设置sacle3d中X轴、Y轴、Z轴的缩放参数实现动画。 设置sacle3d中X轴、Y轴、Z轴的缩放参数实现动画。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="circle"> <div class="circle">
...@@ -326,7 +326,7 @@ ...@@ -326,7 +326,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -422,14 +422,14 @@ text{ ...@@ -422,14 +422,14 @@ text{
matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix(1,0,0,1,0,200)使组件移动和倾斜。 matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix(1,0,0,1,0,200)使组件移动和倾斜。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rect"> </div> <div class="rect"> </div>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
background-color:#F1F3F5; background-color:#F1F3F5;
...@@ -465,7 +465,7 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY ...@@ -465,7 +465,7 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY
transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。 transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rect1"></div> <div class="rect1"></div>
...@@ -476,7 +476,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中 ...@@ -476,7 +476,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction:column; flex-direction:column;
......
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 62e0baeb
...@@ -7,7 +7,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 ...@@ -7,7 +7,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
在pages/index目录下的hml文件中创建一个Tabs组件。 在pages/index目录下的hml文件中创建一个Tabs组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<tabs> <tabs>
...@@ -15,7 +15,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 ...@@ -15,7 +15,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
<text>item1</text> <text>item1</text>
<text>item2</text> <text>item2</text>
</tab-bar> </tab-bar>
<tab-content> <tab-content class="tabContent">
<div class="text"> <div class="text">
<text>content1</text> <text>content1</text>
</div> </div>
...@@ -27,7 +27,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 ...@@ -27,7 +27,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -35,6 +35,10 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 ...@@ -35,6 +35,10 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
align-items: center; align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
} }
.tabContent{
width: 100%;
height: 100%;
}
.text{ .text{
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -50,7 +54,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 ...@@ -50,7 +54,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
Tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。 Tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs index="1" vertical="true"> <tabs index="1" vertical="true">
...@@ -74,7 +78,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ...@@ -74,7 +78,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。 设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs style="margin-top: 30px;"> <tabs style="margin-top: 30px;">
...@@ -100,7 +104,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ...@@ -100,7 +104,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
## 设置样式 ## 设置样式
设置Tabs背景色及边框和tab-content布局。 设置Tabs背景色及边框和tab-content布局。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<tabs class="tabs"> <tabs class="tabs">
...@@ -120,7 +124,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ...@@ -120,7 +124,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -155,7 +159,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ...@@ -155,7 +159,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。 开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs class="tabs" onchange="tabChange"> <tabs class="tabs" onchange="tabChange">
...@@ -175,7 +179,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使 ...@@ -175,7 +179,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
</div> </div>
``` ```
``` ```js
/* index.js */ /* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -201,7 +205,7 @@ export default { ...@@ -201,7 +205,7 @@ export default {
用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。 用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<tabs onchange="changeTabactive"> <tabs onchange="changeTabactive">
...@@ -229,7 +233,7 @@ export default { ...@@ -229,7 +233,7 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -265,7 +269,7 @@ background-color:#F1F3F5; ...@@ -265,7 +269,7 @@ background-color:#F1F3F5;
} }
``` ```
``` ```js
/* index.js */ /* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/ui/ui-js-components-button.md
浏览文件 @ 62e0baeb
...@@ -74,7 +74,7 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按 ...@@ -74,7 +74,7 @@ Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > ![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文件里进行权限配置。 如果需要添加ohos.permission.INTERNET权限，则在resources文件夹下的config.json文件里进行权限配置。
......
zh-cn/application-dev/ui/ui-js-components-canvas.md
浏览文件 @ 62e0baeb
...@@ -9,7 +9,7 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C ...@@ -9,7 +9,7 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C
在pages/index目录下的hml文件中创建一个Canvas组件。 在pages/index目录下的hml文件中创建一个Canvas组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas></canvas> <canvas></canvas>
...@@ -17,9 +17,11 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C ...@@ -17,9 +17,11 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -43,7 +45,7 @@ canvas{ ...@@ -43,7 +45,7 @@ canvas{
Canvas组件设置宽（width）、高（height）、背景色（background-color）及边框样式（border）。 Canvas组件设置宽（width）、高（height）、背景色（background-color）及边框样式（border）。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas></canvas> <canvas></canvas>
...@@ -51,9 +53,11 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo ...@@ -51,9 +53,11 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -75,7 +79,7 @@ canvas{ ...@@ -75,7 +79,7 @@ canvas{
Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。 Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1" onlongpress="getUrl"></canvas> <canvas ref="canvas1" onlongpress="getUrl"></canvas>
...@@ -85,7 +89,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU ...@@ -85,7 +89,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width:100%; width:100%;
...@@ -112,7 +116,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU ...@@ -112,7 +116,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ 62e0baeb
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
使用moveTo和lineTo画出一条线段，当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo（二次贝赛尔曲线）或bezierCurveTo（三次贝赛尔曲线）的值组成图形。 使用moveTo和lineTo画出一条线段，当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo（二次贝赛尔曲线）或bezierCurveTo（三次贝赛尔曲线）的值组成图形。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -24,9 +24,11 @@ ...@@ -24,9 +24,11 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -47,7 +49,7 @@ select{ ...@@ -47,7 +49,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -209,7 +211,7 @@ export default { ...@@ -209,7 +211,7 @@ export default {
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -222,11 +224,11 @@ export default { ...@@ -222,11 +224,11 @@ export default {
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -246,9 +248,7 @@ select{ ...@@ -246,9 +248,7 @@ select{
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -307,7 +307,7 @@ export default { ...@@ -307,7 +307,7 @@ export default {
添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。 添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -321,9 +321,11 @@ export default { ...@@ -321,9 +321,11 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -344,7 +346,7 @@ select{ ...@@ -344,7 +346,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -432,7 +434,7 @@ export default { ...@@ -432,7 +434,7 @@ export default {
先创建文本，再用fillText方法把文字写在画布上。通过globalAlpha属性改变基线透明度，使基线不会挡住文字，再设置textAlign和textBaseline属性确定文字基于基线的位置。 先创建文本，再用fillText方法把文字写在画布上。通过globalAlpha属性改变基线透明度，使基线不会挡住文字，再设置textAlign和textBaseline属性确定文字基于基线的位置。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -445,9 +447,11 @@ export default { ...@@ -445,9 +447,11 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -468,7 +472,7 @@ select{ ...@@ -468,7 +472,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -566,7 +570,7 @@ export default { ...@@ -566,7 +570,7 @@ export default {
创建图片对象后使用drawImage属性画出图片，给图片设置一些动画样式如scale（缩放）、translate（平移）或rotate（旋转）。 创建图片对象后使用drawImage属性画出图片，给图片设置一些动画样式如scale（缩放）、translate（平移）或rotate（旋转）。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -588,7 +592,7 @@ export default { ...@@ -588,7 +592,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -623,7 +627,7 @@ text{ ...@@ -623,7 +627,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -742,7 +746,7 @@ export default { ...@@ -742,7 +746,7 @@ export default {
save方法可对画笔样式进行存储，restore可对存储的画笔进行恢复。如下面的示例，先设置画笔为红色，在保存画笔后对画布进行清除并改变画笔为蓝色，当我们直接使用画笔时会画出一个蓝色矩形，对存储的画笔进行恢复后就可画出红色矩形。 save方法可对画笔样式进行存储，restore可对存储的画笔进行恢复。如下面的示例，先设置画笔为红色，在保存画笔后对画布进行清除并改变画笔为蓝色，当我们直接使用画笔时会画出一个蓝色矩形，对存储的画笔进行恢复后就可画出红色矩形。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -757,9 +761,11 @@ save方法可对画笔样式进行存储，restore可对存储的画笔进行恢 ...@@ -757,9 +761,11 @@ save方法可对画笔样式进行存储，restore可对存储的画笔进行恢
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
align-items: center; align-items: center;
...@@ -791,7 +797,7 @@ text{ ...@@ -791,7 +797,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/ui/ui-js-components-form.md
浏览文件 @ 62e0baeb
...@@ -10,7 +10,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -10,7 +10,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
## 创建Form组件 ## 创建Form组件
在pages/index目录下的hml文件中创建一个Form组件。 在pages/index目录下的hml文件中创建一个Form组件。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form style="width: 100%; height: 20%"> <form style="width: 100%; height: 20%">
...@@ -19,7 +19,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -19,7 +19,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -37,7 +37,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -37,7 +37,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
## 实现表单缩放 ## 实现表单缩放
为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../reference/arkui-js/js-components-common-attributes.md)。 为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../reference/arkui-js/js-components-common-attributes.md)。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form id="formId" class="formClass" click-effect="spring-large"> <form id="formId" class="formClass" click-effect="spring-large">
...@@ -53,7 +53,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -53,7 +53,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。 通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -79,7 +79,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -79,7 +79,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。 为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form"> <form onsubmit='onSubmit' onreset='onReset' class="form">
...@@ -98,7 +98,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -98,7 +98,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
</div> </div>
``` ```
``` ```css
/* index.css */ /* index.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -118,7 +118,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp ...@@ -118,7 +118,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
} }
``` ```
``` ```js
/* xxx.js */ /* xxx.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default{ export default{
...@@ -145,7 +145,7 @@ export default{ ...@@ -145,7 +145,7 @@ export default{
创建[Input](../reference/arkui-js/js-components-basic-input.md)组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。 创建[Input](../reference/arkui-js/js-components-basic-input.md)组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form onsubmit="formSubmit" onreset="formReset"> <form onsubmit="formSubmit" onreset="formReset">
...@@ -180,9 +180,11 @@ export default{ ...@@ -180,9 +180,11 @@ export default{
</div> </div>
``` ```
``` ```css
/* index.css */ /* index.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction:column; flex-direction:column;
align-items:center; align-items:center;
background-color:#F1F3F5; background-color:#F1F3F5;
...@@ -197,7 +199,7 @@ label{ ...@@ -197,7 +199,7 @@ label{
} }
``` ```
``` ```js
/* xxx.js */ /* xxx.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/ui/ui-js-components-grid.md
浏览文件 @ 62e0baeb
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。 在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;"> <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
...@@ -22,12 +22,13 @@ ...@@ -22,12 +22,13 @@
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; width: 100%;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -44,7 +45,7 @@ ...@@ -44,7 +45,7 @@
grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。 grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" <grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;"
...@@ -61,19 +62,20 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方 ...@@ -61,19 +62,20 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; width: 100%;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -113,7 +115,7 @@ export default { ...@@ -113,7 +115,7 @@ export default {
创建grid-container组件并添加grid-row，在grid-row组件内添加grid-col组件形成布局。 创建grid-container组件并添加grid-row，在grid-row组件内添加grid-col组件形成布局。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType"> <grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
...@@ -148,12 +150,13 @@ export default { ...@@ -148,12 +150,13 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; width: 100%;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -174,7 +177,7 @@ text{ ...@@ -174,7 +177,7 @@ text{
本场景中循环输出list中的内容，创建出网格布局。进行下拉操时触发refresh（刷新页面）方法，这时会向list数组中添加一条数据并设置setTimeout（延迟触发），达到刷新请求数据的效果。 本场景中循环输出list中的内容，创建出网格布局。进行下拉操时触发refresh（刷新页面）方法，这时会向list数组中添加一条数据并设置setTimeout（延迟触发），达到刷新请求数据的效果。
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh"> <refresh refreshing="{{fresh}}" onrefresh="refresh">
...@@ -197,12 +200,13 @@ text{ ...@@ -197,12 +200,13 @@ text{
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; width: 100%;
height: 100%;
} }
text{ text{
color: #0a0aef; color: #0a0aef;
...@@ -211,7 +215,7 @@ text{ ...@@ -211,7 +215,7 @@ text{
``` ```
``` ```js
// index.js // index.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
浏览文件 @ 62e0baeb
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。 以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -23,9 +23,11 @@ ...@@ -23,9 +23,11 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -45,7 +47,7 @@ select{ ...@@ -45,7 +47,7 @@ select{
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -89,7 +91,7 @@ export default { ...@@ -89,7 +91,7 @@ export default {
使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。 使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -103,9 +105,11 @@ export default { ...@@ -103,9 +105,11 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -136,7 +140,7 @@ button{ ...@@ -136,7 +140,7 @@ button{
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/ui/ui-js-components-path2d.md
浏览文件 @ 62e0baeb
...@@ -8,14 +8,14 @@ ...@@ -8,14 +8,14 @@
创建Path2D，使用多条线段组合图形。 创建Path2D，使用多条线段组合图形。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas"></canvas> <canvas ref="canvas"></canvas>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%;
} }
canvas{ canvas{
width: 600px; width: 600px;
...@@ -32,7 +33,7 @@ canvas{ ...@@ -32,7 +33,7 @@ canvas{
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -81,7 +82,7 @@ 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)，图形变大并向左倾斜。 先使用createPath2D创建出路径对象，只对path1路径进行描边，所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中，再对path1对象进行描边（stroke）操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0)，图形变大并向左倾斜。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas"></canvas> <canvas ref="canvas"></canvas>
...@@ -93,7 +94,7 @@ export default { ...@@ -93,7 +94,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -101,6 +102,7 @@ export default { ...@@ -101,6 +102,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%;
} }
canvas{ canvas{
width: 600px; width: 600px;
...@@ -128,7 +130,7 @@ text{ ...@@ -128,7 +130,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
......
zh-cn/application-dev/ui/ui-js-components-switch.md
浏览文件 @ 62e0baeb
...@@ -9,19 +9,17 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S ...@@ -9,19 +9,17 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S
在pages/index目录下的hml文件中创建一个Switch组件。 在pages/index目录下的hml文件中创建一个Switch组件。
``` ```html
<div class="container"> <div class="container">
<switch></switch> <switch></switch>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
} }
``` ```
...@@ -33,7 +31,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S ...@@ -33,7 +31,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S
witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。 witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch> <switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
...@@ -60,7 +58,7 @@ switch{ ...@@ -60,7 +58,7 @@ switch{
``` ```
``` ```css
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -92,7 +90,7 @@ export default { ...@@ -92,7 +90,7 @@ export default {
实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。 实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="change"> <div class="change">
...@@ -111,7 +109,7 @@ export default { ...@@ -111,7 +109,7 @@ export default {
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -166,7 +164,7 @@ switch{ ...@@ -166,7 +164,7 @@ switch{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/website.md
浏览文件 @ 62e0baeb
# OpenHarmony应用开发文档 # OpenHarmony应用开发文档
- [应用开发导读](application-dev-guide.md) - [应用开发导读](application-dev-guide.md)
- 快速开始 - 入门
- 快速入门 - 快速入门
- [开发准备](quick-start/start-overview.md) - [开发准备](quick-start/start-overview.md)
- [使用eTS语言开发（传统代码方式）](quick-start/start-with-ets.md) - [使用eTS语言开发（传统代码方式）](quick-start/start-with-ets.md)
...@@ -540,7 +540,6 @@ ...@@ -540,7 +540,6 @@
- JS服务卡片UI组件参考 - JS服务卡片UI组件参考
- JS服务卡片UI框架说明 - JS服务卡片UI框架说明
- [文件组织](reference/js-service-widget-ui/js-service-widget-file.md) - [文件组织](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) - [HML语法参考](reference/js-service-widget-ui/js-service-widget-syntax-hml.md)
- [CSS语法参考](reference/js-service-widget-ui/js-service-widget-syntax-css.md) - [CSS语法参考](reference/js-service-widget-ui/js-service-widget-syntax-css.md)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或