Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 bdd15f5e 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!20402 【4.0-Beta1】翻译完成 19209+19370+19865+19874+19393+19295+20045 

Merge pull request !20402 from ester.zhou/C4-19209
上级 94da2dd8 bc058d8d
隐藏空白更改
内联 并排
Showing with 188 addition and 147 deletion
en/application-dev/reference/apis/js-apis-curve.md
浏览文件 @ bdd15f5e
......@@ -25,9 +25,9 @@ Implements initialization for the interpolation curve, which is used to create a
**Parameters**
| Name| Type | Mandatory| Default Value | Description |
| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- |
| curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | No | Curve.Linear | Curve type.|
| Name| Type | Mandatory| Description |
| ------ | ----------------------------------------------- | ---- | ----------------------------------- |
| curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | No | Curve type.<br>Default value: **Curve.Linear**|
**Return value**
......@@ -151,16 +151,16 @@ Creates a spring animation curve. If multiple spring animations are applied to t
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| response | number | No | Duration of one complete oscillation,<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| response | number | No | Duration of one complete oscillation.<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **interpolate** function of the curve.|
**Return value**
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **interpolate** function of the curve.|
**Example**
......@@ -187,13 +187,13 @@ Creates a responsive spring animation curve. It is a special case of [springMoti
| --------- | ------ | ---- | ----- |
| response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.|
| dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained by using the **interpolate** function of the curve.|
**Return value**
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate9) function of the curve.|
**Example**
......@@ -260,7 +260,7 @@ import Curves from '@ohos.curves'
interpolate(fraction) {
return Math.sqrt(fraction);
}
Curves.customCurve(this.interpolate) // Create a custom curve.
private curve = Curves.customCurve(this.interpolate) // Create a custom curve.
```
......@@ -268,7 +268,7 @@ Curves.customCurve(this.interpolate) // Create a custom curve.
## ICurve
### interpolate
### interpolate<sup>9+</sup>
interpolate(fraction: number): number
......@@ -310,9 +310,9 @@ Implements initialization to create a curve. This API is deprecated since API ve
**Parameters**
| Name| Type | Mandatory| Default Value | Description |
| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- |
| curve |[Curve](../arkui-ts/ts-appendix-enums.md#curve) | No | Curve.Linear | Curve type.|
| Name| Type | Mandatory| Description |
| ------ | ----------------------------------------------- | ---- | ----------------------------------- |
| curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | No | Curve type.<br>Default value: **Curve.Linear**|
## Curves.steps<sup>(deprecated)</sup>
......
en/application-dev/reference/apis/js-apis-font.md
浏览文件 @ bdd15f5e
......@@ -5,6 +5,8 @@ The **font** module provides APIs for registering custom fonts.
> **NOTE**
>
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> The APIs provided by this module are system APIs.
## Modules to Import
......
en/application-dev/reference/apis/js-apis-matrix4.md
浏览文件 @ bdd15f5e
......@@ -16,7 +16,7 @@ import matrix4 from '@ohos.matrix4'
## matrix4.init
init(array: Array&lt;number&gt;): Matrix4Transit
init(option: [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number]): Matrix4Transit
Matrix constructor, which is used to create a 4 x 4 matrix by using the input parameter. Column-major order is used.
......@@ -25,17 +25,17 @@ Matrix constructor, which is used to create a 4 x 4 matrix by using the input pa
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------- | ---- | ------------------------------------------------------------ |
| array | Array&lt;number&gt; | Yes | A number array whose length is 16 (4 x 4). For details, see **array** parameters.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] |
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| option | [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number] | Yes | A number array whose length is 16 (4 x 4). For details, see **Description of a 4 x 4 matrix**.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] |
**Return value**
| Type | Description |
| -------------- | ---------------------------- |
| Matrix4Transit | 4 x 4 matrix object created based on the input parameter.|
| Type | Description |
| --------------------------------- | ---------------------------- |
| [Matrix4Transit](#matrix4transit) | 4 x 4 matrix object created based on the input parameter.|
**array** parameters
**Description of a 4 x 4 matrix**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | -------------------- |
......@@ -91,9 +91,9 @@ Constructs an identity matrix.
**Return value**
| Type | Description |
| -------------- | -------------- |
| Matrix4Transit | Identity matrix object.|
| Type | Description |
| --------------------------------- | -------------- |
| [Matrix4Transit](#matrix4transit) | Identity matrix object.|
**Example**
......@@ -136,9 +136,9 @@ Copies this matrix object.
**Return value**
| Type | Description |
| -------------- | -------------------- |
| Matrix4Transit | Copy object of the current matrix.|
| Type | Description |
| --------------------------------- | -------------------- |
| [Matrix4Transit](#matrix4transit) | Copy object of the current matrix.|
**Example**
......@@ -171,12 +171,12 @@ struct Test {
![en-us_image_0000001219744181](figures/en-us_image_0000001219744181.png)
## Matrix4
## Matrix4Transit
### combine
combine(matrix: Matrix4): Matrix4Transit
combine(option: Matrix4Transit): Matrix4Transit
Combines the effects of two matrices to generate a new matrix object.
......@@ -185,15 +185,15 @@ Combines the effects of two matrices to generate a new matrix object.
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------- | ---- | ------------------ |
| matrix | Matrix4 | Yes | Matrix object to be combined.|
| Name| Type | Mandatory| Description |
| ------ | --------------------------------- | ---- | ------------------ |
| option | [Matrix4Transit](#matrix4transit) | Yes | Matrix object to be combined.|
**Return value**
| Type | Description |
| -------------- | ------------------ |
| Matrix4Transit | Object after matrix combination.|
| Type | Description |
| --------------------------------- | ------------------ |
| [Matrix4Transit](#matrix4transit) | Object after matrix combination.|
**Example**
......@@ -238,9 +238,9 @@ Inverts this matrix object.
**Return value**
| Type | Description |
| -------------- | ---------------------- |
| Matrix4Transit | Inverse matrix object of the current matrix.|
| Type | Description |
| --------------------------------- | ---------------------- |
| [Matrix4Transit](#matrix4transit) | Inverse matrix object of the current matrix.|
**Example**
......@@ -273,7 +273,7 @@ struct Tests {
### translate
translate({x?: number, y?: number, z?: number}): Matrix4Transit
translate(option: TranslateOption): Matrix4Transit
Translates this matrix object along the x, y, and z axes.
......@@ -281,17 +281,15 @@ Translates this matrix object along the x, y, and z axes.
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ----------------------------------------------------------- |
| x | number | No | Translation distance along the x-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| y | number | No | Translation distance along the y-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| z | number | No | Translation distance along the z-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| Name| Type | Mandatory| Description |
| ------ | ----------------------------------- | ---- | -------------- |
| option | [TranslateOption](#translateoption) | Yes | Translation configuration.|
**Return value**
| Type | Description |
| -------------- | ---------------------------- |
| Matrix4Transit | Matrix object after the translation effect is added.|
| Type | Description |
| --------------------------------- | ---------------------------- |
| [Matrix4Transit](#matrix4transit) | Matrix object after the translation.|
**Example**
......@@ -319,7 +317,7 @@ struct Test {
### scale
scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Matrix4Transit
scale(option: ScaleOption): Matrix4Transit
Scales this matrix object along the x, y, and z axes.
......@@ -328,19 +326,16 @@ Scales this matrix object along the x, y, and z axes.
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------------ |
| x | number | No | Scaling multiple along the x-axis. If the value is greater than 1, the image is scaled up along the x-axis. If the value is less than 1, the image is scaled down along the x-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| y | number | No | Scaling multiple along the y-axis. If the value is greater than 1, the image is scaled up along the y-axis. If the value is less than 1, the image is scaled down along the y-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| z | number | No | Scaling multiple along the z-axis. If the value is greater than 1, the image is scaled up along the z-axis. If the value is less than 1, the image is scaled down along the z-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| centerX | number | No | X coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
| Name| Type | Mandatory| Description |
| ------ | --------------------------- | ---- | -------------- |
| option | [ScaleOption](#scaleoption) | Yes | Scaling configuration.|
**Return value**
| Type | Description |
| -------------- | ---------------------------- |
| Matrix4Transit | Matrix object after the scaling effect is added.|
| Type | Description |
| --------------------------------- | ---------------------------- |
| [Matrix4Transit](#matrix4transit) | Matrix object after the scaling.|
**Example**
......@@ -367,7 +362,7 @@ struct Test {
### rotate
rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Matrix4Transit
rotate(option: RotateOption): Matrix4Transit
Rotates this matrix object along the x, y, and z axes.
......@@ -376,20 +371,16 @@ Rotates this matrix object along the x, y, and z axes.
**Parameters**
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------- |
| x | number | No | X coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| y | number | No | Y coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| angle | number | No | Rotation angle.<br>Default value: **0** |
| centerX | number | No | X coordinate of the center point.<br>Default value: **0** |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0** |
| Name| Type | Mandatory| Description |
| ------ | ----------------------------- | ---- | -------------- |
| option | [RotateOption](#rotateoption) | Yes | Rotation configuration.|
**Return value**
| Type | Description |
| -------------- | ---------------------------- |
| Matrix4Transit | Matrix object after the rotation effect is added.|
| Type | Description |
| --------------------------------- | ---------------------------- |
| [Matrix4Transit](#matrix4transit) | Matrix object after the rotation.|
**Example**
......@@ -417,7 +408,7 @@ struct Test {
### transformPoint
transformPoint(point: Point): Point
transformPoint(option: [number, number]): [number, number]
Applies the current transformation effect to a coordinate point.
......@@ -426,15 +417,15 @@ Applies the current transformation effect to a coordinate point.
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ----- | ---- | ------------------ |
| point | Point | Yes | Point to be transformed.|
| Name| Type | Mandatory| Description |
| ------ | ---------------- | ---- | ------------------ |
| option | [number, number] | Yes | Point to be transformed.|
**Return value**
| Type | Description |
| ----- | ---------------- |
| Point | Point object after matrix transformation|
| Type | Description |
| ---------------- | --------------------------- |
| [number, number] | Point object after matrix transformation|
**Example**
......@@ -472,3 +463,32 @@ struct Test {
```
![en-us_image_0000001219864133](figures/en-us_image_0000001219864133.PNG)
## TranslateOption
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ----------------------------------------------------------- |
| x | number | No | Translation distance along the x-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| y | number | No | Translation distance along the y-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
| z | number | No | Translation distance along the z-axis, in px.<br>Default value: **0**<br>Value range: (-∞, +∞)|
## ScaleOption
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------------ |
| x | number | No | Scaling multiple along the x-axis. If the value is greater than 1, the image is scaled up along the x-axis. If the value is less than 1, the image is scaled down along the x-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| y | number | No | Scaling multiple along the y-axis. If the value is greater than 1, the image is scaled up along the y-axis. If the value is less than 1, the image is scaled down along the y-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| z | number | No | Scaling multiple along the z-axis. If the value is greater than 1, the image is scaled up along the z-axis. If the value is less than 1, the image is scaled down along the z-axis.<br>Default value: **1**<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| centerX | number | No | X coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0**<br>Value range: (-∞, +∞) |
## RotateOption
| Name | Type | Mandatory| Description |
| ------- | ------ | ---- | ------------------------------------------------------- |
| x | number | No | X coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| y | number | No | Y coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| z | number | No | Z coordinate of the rotation axis vector.<br>Default value: **1**<br>Value range: (-∞, +∞)|
| angle | number | No | Rotation angle.<br>Default value: **0** |
| centerX | number | No | X coordinate of the center point.<br>Default value: **0** |
| centerY | number | No | Y coordinate of the center point.<br>Default value: **0** |
en/application-dev/reference/apis/js-apis-measure.md
浏览文件 @ bdd15f5e
......@@ -112,7 +112,7 @@ Provides attributes of the measured text.
| Name | Type | Mandatory| Description |
| -------------- | -------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------- |
| textContent<sup>10+</sup> | string | Yes | Content of the measured text. |
| textContent | string | Yes | Content of the measured text. |
| constraintWidth<sup>10+</sup> | number \| string \| [Resource](../arkui-ts/ts-types.md#resource) | No | Layout width of the measured text.<br>The default unit is vp. |
| fontSize | number \| string \| [Resource](../arkui-ts/ts-types.md#resource) | No | Font size of the measured text. If the value is of the number type, the unit fp is used.<br>Default value: **16fp**<br>**NOTE**<br>The value cannot be a percentage. |
| fontStyle | number \| [FontStyle](../arkui-ts/ts-appendix-enums.md#fontstyle) | No | Font style of the measured text.<br>Default value: **FontStyle.Normal** |
......
en/application-dev/reference/apis/js-apis-system-router.md
浏览文件 @ bdd15f5e
......@@ -343,8 +343,8 @@ Defines the page routing parameters.
| Name | Type| Mandatory| Description |
| ------ | -------- | ---- | ------------------------------------------------------------ |
| uri<sup>7+</sup> | string | Yes | URI of the target page, in either of the following formats:<br>1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:<br>- pages/index/index<br> - pages/detail/detail<br>2. Specific path. If the URI is a slash (/), the home page is displayed.|
| params<sup>7+</sup> | object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.|
| uri | string | Yes | URI of the target page, in either of the following formats:<br>1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:<br>- pages/index/index<br> - pages/detail/detail<br>2. Specific path. If the URI is a slash (/), the home page is displayed.|
| params | object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.|
## BackRouterOptions
......
en/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ bdd15f5e
......@@ -2,7 +2,7 @@
The **\<Badge>** component is a container that can be attached to another component for tagging.
> **NOTE**
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -11,6 +11,10 @@ The **\<Badge>** component is a container that can be attached to another compon
This component supports only one child component.
> **NOTE**
>
> Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
## APIs
......@@ -22,12 +26,12 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| count | number | Yes| - | Number of notifications.|
| position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
| maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.|
| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| count | number | Yes| Number of notifications.<br>**NOTE**<br>If the value is less than or equal to 0, no badge is displayed.<br>Value range: [-2147483648, 2147483647]<br>If the value is not an integer, it is rounded off to the nearest integer. For example, 5.5 is rounded off to 5.|
| position | [BadgePosition](#badgeposition) | No| Position to display the badge relative to the parent component.<br>Default value: **BadgePosition.RightTop**|
| maxCount | number | No| Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.<br>Default value: **99**<br>Value range: [-2147483648, 2147483647]<br>If the value is not an integer, it is rounded off to the nearest integer. For example, 5.5 is rounded off to 5.|
| style | [BadgeStyle](#badgestyle) | Yes| Style of the badge, including the font color, font size, badge color, and badge size.|
**API 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
......@@ -57,15 +61,23 @@ Since API version 9, this API is supported in ArkTS widgets.
Since API version 9, this API is supported in ArkTS widgets.
| 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. |
| fontWeight<sup>10+</sup> | number \|[FontWeight](ts-appendix-enums.md#fontweight) \| string | No | FontWeight.Normal | Font weight of the text. |
| borderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Color.Red | Border color of the background. |
| borderWidth<sup>10+</sup> | [Length](ts-types.md#length) | No | 1.0vp | Border width of the background. |
| Name | Type | Mandatory| Description |
| ------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Font color.<br>Default value: **Color.White** |
| fontSize | number \| string | No | Font size.<br>Default value: **10**<br>Unit: vp<br>**NOTE**<br>This parameter cannot be set in percentage.|
| badgeSize | number \| string | No | Badge size.<br>Default value: **16**<br>Unit: vp<br>**NOTE**<br>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 | Badge color.<br>Default value: **Color.Red** |
| fontWeight<sup>10+</sup> | number \|[FontWeight](ts-appendix-enums.md#fontweight) \| string | No | Font weight of the text.<br>Default value: **FontWeight.Normal**<br>**NOTE**<br>This parameter cannot be set in percentage.|
| borderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Border color of the background. |
| borderWidth<sup>10+</sup> | [Length](ts-types.md#length) | No | Border width of the background.<br>Default value: **1**<br>Unit: vp<br>**NOTE**<br>This parameter cannot be set in percentage.|
## Attributes
The [universal attributes](ts-universal-attributes-size.md) are supported.
## Events
The [universal events](ts-universal-events-click.md) are supported.
## Example
......
en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
浏览文件 @ bdd15f5e
......@@ -4,7 +4,7 @@ A date picker dialog box is a dialog box that allows users to select a date from
> **NOTE**
>
> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## DatePickerDialog.show
......@@ -15,20 +15,20 @@ Shows a date picker dialog box.
**DatePickerDialogOptions**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| start | Date | No| Date('1970-1-1') | Start date of the picker.|
| end | Date | No| Date('2100-12-31') | End date of the picker.|
| selected | Date | No| Current system date| Selected date.|
| lunar | boolean | No| false | Whether to display the lunar calendar.|
| showTime<sup>10+</sup> | boolean | No| false | Whether to display the time item.|
| useMilitaryTime<sup>10+</sup> | boolean | No| false | Whether to display time in 24-hour format.|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width for the top and bottom items.|
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width of all items except the top, bottom, and selected items.|
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width of the selected item.|
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| start | Date | No| Start date of the picker.<br>Default value: **Date('1970-1-1')**|
| end | Date | No| End date of the picker.<br>Default value: **Date('2100-12-31')**|
| selected | Date | No| Selected date.<br>Default value: current system date|
| lunar | boolean | No| Whether to display the lunar calendar.<br>Default value: **false**|
| showTime<sup>10+</sup> | boolean | No| Whether to display the time item.<br>Default value: **false**|
| useMilitaryTime<sup>10+</sup> | boolean | No| Whether to display time in 24-hour format.<br>Default value: **false**|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} |
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| Callback invoked when the selected item in the picker changes.|
## Example
......@@ -86,3 +86,5 @@ struct DatePickerDialogExample {
}
}
```
![DataPickerDialog](figures/DataPickerDialog.gif)
en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ bdd15f5e
......@@ -17,13 +17,13 @@ Shows a text picker in the given settings.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| range | string[] \| [Resource](ts-types.md#resource)\|[TextPickerRangeContent](ts-basic-components-textpicker.md#textpickerrangecontent10)[]<sup>10+</sup> | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed.|
| range | string[] \| [Resource](ts-types.md#resource)\|[TextPickerRangeContent](ts-basic-components-textpicker.md#textpickerrangecontent10)[]<sup>10+</sup> | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed.<br>**NOTE**<br>The Resource type supports only [strarray.json](../../quick-start/resource-categories-and-access.md#resource-group-subdirectories).|
| selected | number | No| Index of the selected item.<br>Default value: **0**|
| value | string | No | Text of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.|
| defaultPickerItemHeight | number \| string | No| Height of the picker item.|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.|
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.|
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} |
| onAccept | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the selected item changes.|
......@@ -32,8 +32,8 @@ Shows a text picker in the given settings.
| Name| Type| Description|
| -------- | -------- | -------- |
| value | string | Text of the selected item.<br>**NOTE**<br>For a text list or a list consisting of text and images, **value** indicates the text value of the selected item.<br>For an image list, **value** is empty.|
| index | number | Index of the selected item in the range.|
| value | string | Text of the selected item.<br>**NOTE**<br>When the picker contains text only or both text and imagery, **value** indicates the text value of the selected item.<br>For an image list, **value** is empty.|
| index | number | Index of the selected item in the range. |
## Example
......@@ -46,27 +46,31 @@ struct TextPickerDialogExample {
private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
build() {
Column() {
Button("TextPickerDialog")
.margin(20)
.onClick(() => {
TextPickerDialog.show({
range: this.fruits,
selected: this.select,
onAccept: (value: TextPickerResult) => {
// Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed.
this.select = value.index
console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TextPickerDialog:onCancel()")
},
onChange: (value: TextPickerResult) => {
console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
}
Row() {
Column() {
Button("TextPickerDialog")
.margin(20)
.onClick(() => {
TextPickerDialog.show({
range: this.fruits,
selected: this.select,
onAccept: (value: TextPickerResult) => {
// Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed.
this.select = value.index
console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TextPickerDialog:onCancel()")
},
onChange: (value: TextPickerResult) => {
console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
}
})
})
})
}.width('100%')
}.width('100%')
}.height('100%')
}
}
```
![TextPickerDialog](figures/TextPickerDialog.gif)
en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ bdd15f5e
......@@ -19,9 +19,9 @@ Shows a time picker dialog box.
| -------- | -------- | -------- | -------- |
| selected | Date | No| Selected time.<br>Default value: current system time|
| useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.<br>Default value: **false**|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.|
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.|
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.|
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} |
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.|
......@@ -43,7 +43,7 @@ struct TimePickerDialogExample {
TimePickerDialog.show({
selected: this.selectTime,
onAccept: (value: TimePickerResult) => {
//Set selectTime to the time when the OK button is clicked. In this way, when the dialog box is displayed again, the selected time is the time when the operation was confirmed last time.
// Set selectTime to the time when the OK button is clicked. In this way, when the dialog box is displayed again, the selected time is the time when the operation was confirmed last time.
this.selectTime.setHours(value.hour, value.minute)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
......@@ -77,3 +77,5 @@ struct TimePickerDialogExample {
}
}
```
![TimetPickerDialog](figures/TimePickerDialog.gif)
en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ bdd15f5e
......@@ -22,10 +22,10 @@ Image effects include blur, shadow, spherical effect, and much more.
| invert | number | 0 | Inversion ratio of the component. If the value is **1**, the component is completely inverted. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| sepia | number | 0 | Sepia conversion ratio of the component. If the value is **1**, the image is completely sepia. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
| hueRotate | number \| string | '0deg' | Hue rotation angle of the component.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then -180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| colorBlend <sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Color to blend with the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| sphericalEffect<sup>10+</sup> | [number] | - | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is **0**, the component remains unchanged. If the value is **1**, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.|
| lightUpEffect<sup>10+</sup> | [number] | - | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is **0**, the component is dark. If the value is **1**, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br>(1) The image shrinks from the four edges by the absolute value of length set through **options**.<br>(2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction.<br>(2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed.<br>(3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image. |
| colorBlend<sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Color to blend with the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| sphericalEffect<sup>10+</sup> | [number] | - | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is **0**, the component remains unchanged. If the value is **1**, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.<br>This is a system API.|
| lightUpEffect<sup>10+</sup> | [number] | - | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is **0**, the component is dark. If the value is **1**, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>This is a system API.|
| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br>(1) The image shrinks from the four edges by the absolute value of length set through **options**.<br>(2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction.<br>(2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed.<br>(3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image.<br>This is a system API.|
## ShadowOptions
......@@ -320,7 +320,6 @@ Below is how the component looks:
Compared with the original image, the effect drawing is implemented in two steps:
1. The image size is reduced. The resultant size is the original image size minus
the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,**
1. The image size is reduced. The resultant size is the original image size minus the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,**
**right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080.
2. Edge pixels are stretched to restore the image to its original size.
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或