Skip to content

D
Docs

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

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

Update docs (11420) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 6f2fe760
隐藏空白更改
内联 并排
Showing with 424 addition and 443 deletion
en/application-dev/reference/apis/js-apis-system-time.md
浏览文件 @ efdcd44b
...@@ -4,16 +4,14 @@ The **systemTime** module provides system time and time zone features. You can u ...@@ -4,16 +4,14 @@ The **systemTime** module provides system time and time zone features. You can u
> **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.
## 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
...@@ -26,25 +24,24 @@ Sets the system time. This API uses an asynchronous callback to return the resul ...@@ -26,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 return the result.| | 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, data) => {
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. Data:` + JSON.stringify(data));
}); });
``` ```
## systemTime.setTime ## systemTime.setTime
...@@ -64,22 +61,21 @@ Sets the system time. This API uses a promise to return the result. ...@@ -64,22 +61,21 @@ Sets the system time. This API uses a promise to return the result.
**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((data) => {
console.log(`systemTime.setTime success data : ` + JSON.stringify(data)); console.log(`Succeeded in setting systemTime. Data:` + JSON.stringify(data));
}).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>
...@@ -91,23 +87,22 @@ Obtains the time elapsed since the Unix epoch. This API uses an asynchronous cal ...@@ -91,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 | Yes | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds. | | isNano | boolean | Yes | 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>
...@@ -119,22 +114,21 @@ Obtains the time elapsed since the Unix epoch. This API uses an asynchronous cal ...@@ -119,22 +114,21 @@ Obtains the time elapsed since the Unix epoch. This API uses an asynchronous cal
**Parameters** **Parameters**
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | ------------------------------------------------------------ | | -------- | ----------- | ---- | ---------------------------------- |
| 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((error, data) => { systemTime.getCurrentTime((error, data) => {
if (error) { if (error) {
console.error(`failed to systemTime.getCurrentTime because ` + JSON.stringify(error)); console.error(`Succeeded in getting systemTime. Data:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getCurrentTime success data : ` + JSON.stringify(data)); console.log(`Failed to get systemTime. Cause:` + JSON.stringify(data));
}); });
``` ```
## systemTime.getCurrentTime<sup>8+</sup> ## systemTime.getCurrentTime<sup>8+</sup>
...@@ -146,197 +140,191 @@ Obtains the time elapsed since the Unix epoch. This API uses a promise to return ...@@ -146,197 +140,191 @@ 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 the time to return is in nanoseconds.<br/>- **true**: in nanoseconds.<br>- **false**: in milliseconds. | | 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 | Yes | Whether the time to return is in nanoseconds.<br/>- **true**: in nanoseconds.<br>- **false**: in milliseconds. | | isNano | boolean | Yes | 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 time. Cause:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting real active time. Data:` + JSON.stringify(data));
}); });
``` ```
## systemTime.getRealActiveTime<sup>8+</sup> ## systemTime.getRealActiveTime<sup>8+</sup>
getRealActiveTime(callback: AsyncCallback&lt;number&gt;): void getRealActiveTime(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 |
| -------- | --------------------------- | ---- | ------------------------------------------------------------ | | -------- | -------------- | ---- | --------------------- |
| 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((error, data) => { systemTime.getRealActiveTime((error, data) => {
if (error) { if (error) {
console.error(`failed to systemTime.getRealActiveTimebecause ` + JSON.stringify(error)); console.error(`Failed to get real active time. Cause:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting real active time. 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 the time to return is in nanoseconds.<br/>- **true**: in nanoseconds.<br>- **false**: in milliseconds. | | 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 time. 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 time. 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 | Yes | Whether the time to return is in nanoseconds.<br/>- **true**: in nanoseconds.<br>- **false**: in milliseconds. | | isNano | boolean | Yes | 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 time. Cause:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getRealTime success data: ` + JSON.stringify(data)); console.log(`Succeeded in getting real time. Data:` + JSON.stringify(data));
}); });
``` ```
## systemTime.getRealTime<sup>8+</sup> ## systemTime.getRealTime<sup>8+</sup>
getRealTime(callback: AsyncCallback&lt;number&gt;): void getRealTime(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 |
| -------- | --------------------------- | ---- | ------------------------------------------------------------ | | -------- | --------- | ---- | --------------------------- |
| 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((error, data) => { systemTime.getRealTime((error, data) => {
if (error) { if (error) {
console.error(`failed to systemTime.getRealTime because ` + JSON.stringify(error)); console.error(`Failed to get real time. Cause:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getRealTime success data: ` + JSON.stringify(data)); console.log(`Succeeded in getting real time. 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 the time to return is in nanoseconds.<br/>- **true**: in nanoseconds.<br>- **false**: in milliseconds. | | 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 time. Data:` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.getRealTime because ` + JSON.stringify(error)); console.error(`Failed to get real time. Cause:` + JSON.stringify(error));
}); });
``` ```
## systemTime.setDate ## systemTime.setDate
...@@ -350,24 +338,23 @@ Sets the system date. This API uses an asynchronous callback to return the resul ...@@ -350,24 +338,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 return the result.| | callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example** **Example**
```js ```js
var data = new Date(); let data = new Date();
systemTime.setDate(data,(error, data) => { systemTime.setDate(data,(error, data) => {
if (error) { if (error) {
console.error('failed to systemTime.setDate because ' + JSON.stringify(error)); console.error('Failed to set system date. Cause:' + JSON.stringify(error));
return; return;
} }
console.info('systemTime.setDate success data : ' + JSON.stringify(data)); console.info('Succeeded in setting system date. Data:' + JSON.stringify(data));
}); });
``` ```
## systemTime.setDate ## systemTime.setDate
...@@ -389,19 +376,18 @@ Sets the system date. This API uses a promise to return the result. ...@@ -389,19 +376,18 @@ Sets the system date. This API uses a promise to return the result.
| 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(); let data = new Date();
systemTime.setDate(data).then((value) => { systemTime.setDate(data).then((value) => {
console.log(`systemTime.setDate success data : ` + JSON.stringify(value)); console.log(`Succeeded in setting system date. Data:` + JSON.stringify(value));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.setDate because: ` + JSON.stringify(error)); console.error(`Failed to set system date. Cause:` + JSON.stringify(error));
}); });
``` ```
## systemTime.getDate<sup>8+</sup> ## systemTime.getDate<sup>8+</sup>
...@@ -413,28 +399,27 @@ Obtains the current system date. This API uses an asynchronous callback to retur ...@@ -413,28 +399,27 @@ 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 system date. Cause:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getDate success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting system date. 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
...@@ -446,14 +431,13 @@ Obtains the current system date. This API uses a promise to return the result. ...@@ -446,14 +431,13 @@ Obtains the current system date. This API uses a promise to return the result.
**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 system date. Data:` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.getDate because ` + JSON.stringify(error)); console.error(`Failed to get system date. Cause:` + JSON.stringify(error));
}); });
``` ```
## systemTime.setTimezone ## systemTime.setTimezone
...@@ -467,23 +451,22 @@ Sets the system time zone. This API uses an asynchronous callback to return the ...@@ -467,23 +451,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 return the result.| | 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, data) => {
if (error) { if (error) {
console.error('failed to systemTime.setTimezone because ' + JSON.stringify(error)); console.error('Failed to set system time zone. Cause:' + JSON.stringify(error));
return; return;
} }
console.info('SystemTimePlugin systemTime.setTimezone success data : ' + JSON.stringify(data)); console.info('Succeeded in setting system time zone. Data:' + JSON.stringify(data));
}); });
``` ```
## systemTime.setTimezone ## systemTime.setTimezone
...@@ -505,18 +488,17 @@ Sets the system time zone. This API uses a promise to return the result. ...@@ -505,18 +488,17 @@ Sets the system time zone. This API uses a promise to return the result.
| 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((data) => {
console.log(`systemTime.setTimezone success data : ` + JSON.stringify(data)); console.log(`Succeeded in setting system time zone. Data:` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.setTimezone because: ` + JSON.stringify(error)); console.error(`Failed to set system time zone. Cause:` + JSON.stringify(error));
}); });
``` ```
## systemTime.getTimezone<sup>8+</sup> ## systemTime.getTimezone<sup>8+</sup>
...@@ -528,22 +510,21 @@ Obtains the system time zone. This API uses an asynchronous callback to return t ...@@ -528,22 +510,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 system time zone. Cause:` + JSON.stringify(error));
return; return;
} }
console.log(`systemTime.getTimezone success data : ` + JSON.stringify(data)); console.log(`Succeeded in getting system time zone. Data:` + JSON.stringify(data));
}); });
``` ```
## systemTime.getTimezone<sup>8+</sup> ## systemTime.getTimezone<sup>8+</sup>
...@@ -561,10 +542,10 @@ Obtains the system time zone. This API uses a promise to return the result. ...@@ -561,10 +542,10 @@ Obtains the system time zone. This API uses a promise to return the result.
**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 system time zone. Data:` + JSON.stringify(data));
}).catch((error) => { }).catch((error) => {
console.error(`failed to systemTime.getTimezone because ` + JSON.stringify(error)); console.error(`Failed to get system time zone. Cause:` + JSON.stringify(error));
}); });
``` ```
en/application-dev/reference/arkui-js/js-components-container-dialog.md
浏览文件 @ efdcd44b
# dialog<a name="EN-US_TOPIC_0000001173324657"></a> # dialog
The **<dialog\>** component is a custom pop-up container. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions<a name="section11257113618419"></a> The **\<dialog>** component is a custom dialog box.
## Required Permissions
None None
## Child Components<a name="section9288143101012"></a>
A single child component is supported.
## Attributes<a name="section2907183951110"></a>
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
<a name="tb330011ff53049a69f27cec012adf8c1"></a>
<table><thead align="left"><tr id="r4301f3a3b24c499c9bfc42b76ab785f9"><th class="cellrowborder" valign="top" width="19.598040195980403%" id="mcps1.1.6.1.1"><p id="a9ba8c579217b4b8b841b035f1d28b20e"><a name="a9ba8c579217b4b8b841b035f1d28b20e"></a><a name="a9ba8c579217b4b8b841b035f1d28b20e"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="11.178882111788822%" id="mcps1.1.6.1.2"><p id="a633002333b024497914a4b172446f14e"><a name="a633002333b024497914a4b172446f14e"></a><a name="a633002333b024497914a4b172446f14e"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="9.899010098990102%" id="mcps1.1.6.1.3"><p id="a4950f7884c6540b9ad523ac34657d952"><a name="a4950f7884c6540b9ad523ac34657d952"></a><a name="a4950f7884c6540b9ad523ac34657d952"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="7.56924307569243%" id="mcps1.1.6.1.4"><p id="p58189597166"><a name="p58189597166"></a><a name="p58189597166"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="51.754824517548236%" id="mcps1.1.6.1.5"><p id="a1313564aa9404a338447087d5918c17d"><a name="a1313564aa9404a338447087d5918c17d"></a><a name="a1313564aa9404a338447087d5918c17d"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="r06a481428e8d455fba919d3d4618be31"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="adb8a73146d764f2aab50fc046169ab26"><a name="adb8a73146d764f2aab50fc046169ab26"></a><a name="adb8a73146d764f2aab50fc046169ab26"></a>dragable<sup id="sup999420218191"><a name="sup999420218191"></a><a name="sup999420218191"></a>7+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="11.178882111788822%" headers="mcps1.1.6.1.2 "><p id="a06898db2627246f78e85d4fbadeee85c"><a name="a06898db2627246f78e85d4fbadeee85c"></a><a name="a06898db2627246f78e85d4fbadeee85c"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="9.899010098990102%" headers="mcps1.1.6.1.3 "><p id="ae685ead324a647bcba1bbb45c9402dd6"><a name="ae685ead324a647bcba1bbb45c9402dd6"></a><a name="ae685ead324a647bcba1bbb45c9402dd6"></a>false</p>
</td>
<td class="cellrowborder" valign="top" width="7.56924307569243%" headers="mcps1.1.6.1.4 "><p id="p78183594166"><a name="p78183594166"></a><a name="p78183594166"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="51.754824517548236%" headers="mcps1.1.6.1.5 "><p id="a692121725a9b4ebbae65cd22b94b672e"><a name="a692121725a9b4ebbae65cd22b94b672e"></a><a name="a692121725a9b4ebbae65cd22b94b672e"></a>Whether the pop-up can be dragged.</p>
</td>
</tr>
</tbody>
</table>
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>- The **<dialog\>** component does not support the **focusable** and **click-effect** attributes.
## Styles<a name="section5775351116"></a>
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.
## Events<a name="section8562129182916"></a>
Events in [Universal Events](js-components-common-events.md) are not supported. The following table lists the supported event.
<a name="table20562102982910"></a>
<table><thead align="left"><tr id="row9562162932910"><th class="cellrowborder" valign="top" width="18.459999999999997%" id="mcps1.1.4.1.1"><p id="p195626291296"><a name="p195626291296"></a><a name="p195626291296"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="30.769999999999996%" id="mcps1.1.4.1.2"><p id="p185622029202914"><a name="p185622029202914"></a><a name="p185622029202914"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="50.77%" id="mcps1.1.4.1.3"><p id="p9562132915297"><a name="p9562132915297"></a><a name="p9562132915297"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row7562729142911"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="p145622291299"><a name="p145622291299"></a><a name="p145622291299"></a>cancel</p>
</td>
<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="p356210295295"><a name="p356210295295"></a><a name="p356210295295"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="p55621629122916"><a name="p55621629122916"></a><a name="p55621629122916"></a>Triggered when a user taps a non-dialog area to cancel the pop-up.</p>
</td>
</tr>
<tr id="row154462392615"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="p84461834266"><a name="p84461834266"></a><a name="p84461834266"></a>show<sup id="sup2397204717198"><a name="sup2397204717198"></a><a name="sup2397204717198"></a>7+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="p164468315263"><a name="p164468315263"></a><a name="p164468315263"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="p204465311269"><a name="p204465311269"></a><a name="p204465311269"></a>Triggered when the pop-up is displayed.</p>
</td>
</tr>
<tr id="row28470175299"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="p2848161792917"><a name="p2848161792917"></a><a name="p2848161792917"></a>close<sup id="sup4231174871918"><a name="sup4231174871918"></a><a name="sup4231174871918"></a>7+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="p128481917132913"><a name="p128481917132913"></a><a name="p128481917132913"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="p5848121742920"><a name="p5848121742920"></a><a name="p5848121742920"></a>Triggered when the pop-up is closed.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section11753103216253"></a>
Methods in [Universal Methods](js-components-common-methods.md) are not supported. The following table lists the supported methods.
<a name="table20753173210251"></a>
<table><thead align="left"><tr id="row575363214257"><th class="cellrowborder" valign="top" width="18.459999999999997%" id="mcps1.1.4.1.1"><p id="p157531032112517"><a name="p157531032112517"></a><a name="p157531032112517"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="30.769999999999996%" id="mcps1.1.4.1.2"><p id="p77531632132518"><a name="p77531632132518"></a><a name="p77531632132518"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="50.77%" id="mcps1.1.4.1.3"><p id="p147531232132512"><a name="p147531232132512"></a><a name="p147531232132512"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row15753113210251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="p2314135812511"><a name="p2314135812511"></a><a name="p2314135812511"></a>show</p>
</td>
<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="p7314115819256"><a name="p7314115819256"></a><a name="p7314115819256"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="p0314958162512"><a name="p0314958162512"></a><a name="p0314958162512"></a>Shows a dialog box.</p>
</td>
</tr>
<tr id="row393410526251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="p7314358182512"><a name="p7314358182512"></a><a name="p7314358182512"></a>close</p>
</td>
<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="p1231455814253"><a name="p1231455814253"></a><a name="p1231455814253"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="p10314105842512"><a name="p10314105842512"></a><a name="p10314105842512"></a>Closes a dialog box.</p>
</td>
</tr>
</tbody>
</table>
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>Attributes and styles of a **<dialog\>** component cannot be dynamically updated.
## Example Code<a name="section6663311114620"></a>
``` ## Child Components
This component supports only one child component.
## 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 |
| --------------------- | ------- | ----- | ---- | ------------ |
| dragable<sup>7+</sup> | boolean | false | No | Whether the dialog box can be dragged.|
> **NOTE**
>
> The **\<dialog>** component does not support the **focusable** and **click-effect** attributes.
## Styles
Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](../arkui-js/js-components-common-styles.md) are supported.
## 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. |
## 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.|
> **NOTE**
>
> Attributes and styles of a **\<dialog>** component cannot be dynamically updated.
## Example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="doc-page"> <div class="doc-page">
<div class="btn-div"> <div class="btn-div">
...@@ -140,7 +81,7 @@ Methods in [Universal Methods](js-components-common-methods.md) are not suppor ...@@ -140,7 +81,7 @@ Methods in [Universal Methods](js-components-common-methods.md) are not suppor
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.doc-page { .doc-page {
flex-direction: column; flex-direction: column;
...@@ -189,31 +130,31 @@ Methods in [Universal Methods](js-components-common-methods.md) are not suppor ...@@ -189,31 +130,31 @@ Methods in [Universal Methods](js-components-common-methods.md) are not suppor
} }
``` ```
``` ```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'
}) })
...@@ -221,5 +162,4 @@ export default { ...@@ -221,5 +162,4 @@ export default {
} }
``` ```
![](figures/4.gif) ![4](figures/4.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ efdcd44b
...@@ -21,7 +21,7 @@ Gauge(options:{value: number, min?: number, max?: number}) ...@@ -21,7 +21,7 @@ Gauge(options:{value: number, min?: number, max?: number})
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| value | number | Yes| Current data value.| | value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.|
| min | number | No| Minimum value of the current data segment.<br>Default value: **0**| | min | number | No| Minimum value of the current data segment.<br>Default value: **0**|
| max | number | No| Maximum value of the current data segment.<br>Default value: **100**| | max | number | No| Maximum value of the current data segment.<br>Default value: **100**|
...@@ -31,10 +31,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -31,10 +31,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| value | number | Value of the chart.<br>Default value: **0**| | value | number | Value of the chart. It can be dynamically changed.<br>Default value: **0**|
| startAngle | number | Start angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **-150**| | startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**|
| endAngle | number | End angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **150**| | endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**|
| colors | Array&lt;ColorStop&gt; | Colors of the chart. Colors can be set for individual segments.| | colors | Array&lt;[ColorStop](#colorstop)&gt; | Colors of the chart. Colors can be set for individual segments.|
| strokeWidth | Length | Stroke width of the chart.| | strokeWidth | Length | Stroke width of the chart.|
## ColorStop ## ColorStop
...@@ -43,7 +43,7 @@ Describes a gradient stop. ...@@ -43,7 +43,7 @@ Describes a gradient stop.
| Name | Type | Description | | Name | Type | Description |
| --------- | -------------------- | ------------------------------------------------------------ | | --------- | -------------------- | ------------------------------------------------------------ |
| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter specifies the color, and the second parameter specifies the offset, which ranges from 0 to 1.| | ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0, which means that the color is not displayed.|
## Example ## Example
...@@ -55,15 +55,30 @@ Describes a gradient stop. ...@@ -55,15 +55,30 @@ Describes a gradient stop.
@Component @Component
struct GaugeExample { struct GaugeExample {
build() { build() {
Column() { Column({ space: 20 }) {
Gauge({ value: 50, min: 0, max: 100 }) // Use the default value of min and max, which is 0-100, and the default values of startAngle and endAngle, which are 0 and 360, respectively.
.startAngle(210).endAngle(150) // Set the current value to 75.
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) Gauge({ value: 75 })
.strokeWidth(20) .width(200).height(200)
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
// Set the value parameter to 75 and the value attribute to 25. The attribute setting is used.
Gauge({ value: 75 })
.value(25) // If both the attribute and parameter are set, the parameter setting is used.
.width(200).height(200) .width(200).height(200)
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
// A ring chart of 210 to 150 degrees
Gauge({ value: 30, min: 0, max: 100 })
.startAngle(210)
.endAngle(150)
.colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]])
.strokeWidth(20)
.width(200)
.height(200)
}.width('100%').margin({ top: 5 }) }.width('100%').margin({ top: 5 })
} }
} }
``` ```
![en-us_image_0000001174422916](figures/en-us_image_0000001174422916.png) ![gauge](figures/gauge-image.png)
en/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ efdcd44b
...@@ -7,11 +7,6 @@ The **\<Badge>** component is a container that can be attached to another compon ...@@ -7,11 +7,6 @@ The **\<Badge>** component is a container that can be attached to another compon
> 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
None
## Child Components ## Child Components
This component supports only one child component. This component supports only one child component.
...@@ -19,7 +14,7 @@ This component supports only one child component. ...@@ -19,7 +14,7 @@ This component supports only one child component.
## APIs ## APIs
Method 1: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) **Method 1**: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle})
Create a badge. Create a badge.
...@@ -27,36 +22,38 @@ Create a badge. ...@@ -27,36 +22,38 @@ Create a badge.
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| count | number | Yes| - | Number of notifications.| | count | number | Yes| - | Number of notifications.|
| position | 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 | Yes| - | Style of the **<Badge>** component, including the text color, text 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})
Creates a badge based on the given string. Creates a badge based on the given string.
- Parameters **Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | Name| Type| Mandatory| Default Value| Description|
| value | string | Yes| - | Prompt content.| | -------- | -------- | -------- | -------- | -------- |
| position | BadgePosition | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| | value | string | Yes| - | Prompt content.|
| style | BadgeStyle | Yes| - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size.| | 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.|
- BadgeStyle
| Name| Type| Mandatory| Default Value| Description| ## BadgePosition
| -------- | -------- | -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color.White | Text color.| | Name| Description|
| fontSize | number \| string | No| 10 | Text size.| | -------- | -------- |
| badgeSize | number \| string | Yes| - | Badge size.| | RightTop | The badge is displayed in the upper right corner of the parent component.|
| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color.Red | Badge color.| | Right | The badge is vertically centered on the right of the parent component.|
| Left | The badge is vertically centered on the left of the parent component.|
- BadgePosition enums
| Name| Description| ## BadgeStyle
| -------- | -------- |
| RightTop | The badge is displayed in the upper right corner of the parent component.|
| Right | The badge is vertically centered on the right of the parent component.|
| Left | The badge is vertically centered on the left of the parent component.|
| Name | Type | Mandatory| Default Value | Description |
| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. |
| fontSize | number \| string | No | 10 | Font size, in vp. |
| badgeSize | number \| string | No | 16 | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.|
| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.Red | Badge color. |
## Example ## Example
...@@ -65,44 +62,92 @@ Creates a badge based on the given string. ...@@ -65,44 +62,92 @@ Creates a badge based on the given string.
@Entry @Entry
@Component @Component
struct BadgeExample { struct BadgeExample {
@State counts: number = 1 @State counts: number = 1;
@State message: string = 'new' @State message: string = 'new';
build() { build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) { Column() {
Badge({ Text('numberBadge').width('80%')
count: this.counts, Row({ space: 10 }) {
maxCount: 99, // Number badge. The default value of maxCount is 99. If the number of notifications exceeds 99, 99+ is displayed.
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } Badge({
}) { count: this.counts,
Button('message') maxCount: 99,
.onClick(() => { position: BadgePosition.RightTop,
this.counts++ style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) }) {
.width(100).height(50).backgroundColor(0x317aff) Button('message')
}.width(100).height(50) .onClick(() => {
this.counts++;
Badge({ })
value: this.message, .width(100).height(50).backgroundColor(0x317aff)
style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } }.width(100).height(50)
}) {
Text('message') // Number badge
.width(80).height(50).fontSize(16).lineHeight(37) Badge({
.borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) count: this.counts,
}.width(80).height(50) maxCount: 99,
position: BadgePosition.Left,
Badge({ style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
value: ' ', }) {
position: BadgePosition.Right, Button('message')
style: { badgeSize: 6, badgeColor: Color.Red } .onClick(() => {
}) { this.counts++;
Text('message') })
.width(90).height(50).fontSize(16).lineHeight(37) .width(100).height(50).backgroundColor(0x317aff)
.borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) }.width(100).height(50)
}.width(90).height(50)
}.width('100%').margin({ top: 5 })
// Number badge
Badge({
count: this.counts,
maxCount: 99,
position: BadgePosition.Right,
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) {
Button('message')
.onClick(() => {
this.counts++;
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
}.margin(10)
Text('stringBadge').width('80%')
Row({ space: 30 }) {
Badge({
value: this.message,
style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue }
}) {
Text('message')
.width(80)
.height(50)
.fontSize(16)
.lineHeight(37)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xF3F4ED)
}.width(80).height(50)
// When value is null, the dot-style badge is used.
Badge({
value: '',
position: BadgePosition.Right,
style: { badgeSize: 6, badgeColor: Color.Red }
}) {
Text('message')
.width(90)
.height(50)
.fontSize(16)
.lineHeight(37)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xF3F4ED)
}.width(90).height(50)
}.margin(10)
}
} }
} }
``` ```
![en-us_image_0000001212218470](figures/en-us_image_0000001212218470.gif) ![badge](figures/badge.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或