diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_000000117726526811.png b/en/application-dev/reference/arkui-js/figures/en-us_image_000000117726526811.png new file mode 100644 index 0000000000000000000000000000000000000000..d9d9a17fe607c8acc99d3a7e26c6b4316e0b7f5b Binary files /dev/null and b/en/application-dev/reference/arkui-js/figures/en-us_image_000000117726526811.png differ diff --git a/en/application-dev/reference/arkui-js/figures/figures1.png b/en/application-dev/reference/arkui-js/figures/figures1.png deleted file mode 100644 index 2ed837e111c3ac1ba1eafb5b28da581ef4de5d22..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-js/figures/figures1.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-js/js-components-container-badge.md b/en/application-dev/reference/arkui-js/js-components-container-badge.md index c0855efd572677c06214c3bd4900fbfff05a9684..cce7ddc8f052523c4f4e3bb82348196674edd788 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-badge.md +++ b/en/application-dev/reference/arkui-js/js-components-container-badge.md @@ -25,14 +25,14 @@ This component supports only one child component. In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported. -| Name | Type | Default Value | Mandatory | Description | -| ------------------ | ----------- | -------- | ---- | ---------------------------------------- | -| placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:
- **right**: on the right border of the component.
- **rightTop**: in the upper right corner of the component border.
- **left**: on the left border of the component.| -| count | number | 0 | No | Number of notifications displayed via the badge. The default value is **0**. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.
When the **count** value is greater than the **maxcount** value, *maxcount***+** is displayed. The largest integer value supported for **count** is **2147483647**.| -| visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, set the **count** attribute.| -| maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.
The largest integer value supported for **maxcount** is **2147483647**.| -| config | BadgeConfig | - | No | Configuration of the badge. | -| label6+ | string | - | No | Text of the new notification displayed via the badge.
When this attribute is set, attributes **count** and **maxcount** do not take effect.| +| Name | Type | Default Value | Mandatory| Description | +| ------------------ | ----------- | -------- | ---- | ------------------------------------------------------------ | +| placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:
- **right**: on the right border of the component.
- **rightTop**: in the upper right corner of the component border.
- **left**: on the left border of the component.| +| count | number | 0 | No | Number of notifications displayed via the badge. If the value is 0 (default value), the badge is not displayed. If the value is greater than 0, the badge is a number badge.
When the **count** value is greater than the **maxcount** value, *maxcount***+** is displayed. The largest integer value supported for **count** is **2147483647**.| +| visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, also set the **count** attribute.| +| maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.
The largest integer value supported for **maxcount** is **2147483647**.| +| config | BadgeConfig | - | No | Configuration of the badge. | +| label6+ | string | - | No | Text of the new notification displayed via the badge.
When this attribute is set, attributes **count** and **maxcount** do not take effect.| **Table 1** BadgeConfig @@ -110,4 +110,4 @@ export default { } ``` -![figures1](figures/figures1.png) +![en-us_image_000000117726526811](figures/en-us_image_000000117726526811.png) diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md index e18675585e33d687275c6e145ec6c49c533f63cd..1c17cda5d9d55a722cbf3351b3a72586d224c346 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md @@ -36,7 +36,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.
Default value: **0**| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.
Default value: **LineCapStyle.Butt**| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.
Default value: **LineJoinStyle.Miter**| -| strokeMiterLimit | number \| string | Limit value when the sharp angle is drawn as a miter.
Default value: **4**
**NOTE**
This attribute does not take effect because the **\** component cannot be used to draw a shape with a sharp angle.| +| strokeMiterLimit | number \| string | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
Default value: **4**
**NOTE**
This attribute does not take effect for the **\** component, because it does not have a miter join.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.
Default value: **1**
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| | strokeWidth | Length | Stroke width.
Default value: **1**| | antiAlias | boolean | Whether anti-aliasing is enabled.
Default value: **true**| @@ -53,7 +53,7 @@ struct CircleExample { Column({ space: 10 }) { // Draw a circle whose diameter is 150. Circle({ width: 150, height: 150 }) - // Draw a circle with the diameter of 150 and red dashes. (If the width and height are different, the shorter value is used as the diameter.) + // Draw a circle whose diameter is 150 and stroke color is red. (If the width and height values are different, the smaller value will be used as the diameter.) Circle() .width(150) .height(200) diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md index 31ede5c9611e2af12c97aeb7e5bfb6654ca1e7de..019f2f008a634f1aee6f1a90d1028b3c69cbd30f 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md @@ -32,11 +32,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| | stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | [] | Stroke dashes. | +| strokeDashArray | Array<Length> | [] | Stroke dashes.| | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.
**NOTE**
This attribute does not take effect for the **\** component, because it does not have a miter join.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| | strokeWidth | Length | 1 | Stroke width.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.| diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md index 8008dbb26a45122441d98570a47fdf0be1d95037..724c976b06687a818a0456d9fdd4b845a4ea85ab 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -1,17 +1,11 @@ # Line - The **\** component is used to draw a straight line. > **NOTE** > > 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 Not supported diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md index cc922d6c409bab21c9201c3cf8687c3420a4134e..4720e9731a7aa613f5ab15f2815754b5789730c1 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -37,7 +37,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the stroke.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| | strokeWidth | Length | 1 | Width of the stroke.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.| diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md index 113a7cfe6b90415406af3f0d8820309f6d598986..c8c45849bc38492435bee3aa441af82913bb519d 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md @@ -34,11 +34,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.| | stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.| -| strokeDashArray | Array<Length> | [] | Stroke dashes. | +| strokeDashArray | Array<Length> | [] | Stroke dashes.| | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| | strokeWidth | Length | 1 | Stroke width.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.| diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md index a3aaa5a37edd67bc28474046bd9dc436dad3e514..739ca2b19aa78128b2154db9df778bb65dfe9ba9 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md @@ -38,7 +38,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| | strokeWidth | Length | 1 | Stroke width.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.| diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md index f4b1c4679e83e9cc6eb68910308414482abb7b07..e05fad3fd06045b8a6a4641c308378f1caaafbb7 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md @@ -44,7 +44,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| | strokeWidth | Length | 1 | Stroke width.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.| diff --git a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index 16c1978920726e22df7f78ee8a5d37f07e73403c..c889163d984c92630ede5f0247313b6cb54931c4 100644 --- a/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -42,7 +42,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.| -| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.| +| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter.
**NOTE**
This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.
**NOTE**
The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| | strokeWidth | number \| string | 1 | Stroke width.| | antiAlias | boolean | true | Whether anti-aliasing is enabled.| diff --git a/en/application-dev/ui/ui-js-building-ui-routes.md b/en/application-dev/ui/ui-js-building-ui-routes.md index 59dca2db07eecc7a28ea2927fcab453e2dd165b7..6459590ba21ad7dbb67cde8096424af72bf8ff08 100644 --- a/en/application-dev/ui/ui-js-building-ui-routes.md +++ b/en/application-dev/ui/ui-js-building-ui-routes.md @@ -1,22 +1,21 @@ # Defining Page Routes - -An application generally consist of more than one page. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song. You need to link these pages through the page router to implement redirection as required. +An application generally consists of more than one page. For example, a music application may come with a music list page and a playback page. You need to link these pages through the page router to implement redirection as required. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song. The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages: -1. In the **Project** window of DevEco Studio, choose **entry** > **src** > **mainjsdefault**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the detail page. +1. In the **Project** window of DevEco Studio, choose **src** > **main** > **js** > **MainAbility**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the **detail** page. -2. Call **router.push()** to navigate users to the detail page. +2. Call **router.push()** to navigate users to the **detail** page. -3. Call **router.back()** to navigate users to the index page. +3. Call **router.back()** to navigate users to the **index** page. ## Building the Page Layout -The index and detail pages each contains a <text> component that specifies the current page, and a **\