diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md index b3c6978606b2c097b3886a70bdaf44da1dd8ca33..39e9f2edb1198a54817beb421e958a02734ba50a 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md @@ -1,14 +1,13 @@ # Gauge +The **\** component is used to display data in a ring chart. + > **NOTE** > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -The **\** component is used to display data in a ring chart. - - ## Required Permissions None @@ -21,10 +20,10 @@ Not supported ## APIs -Gauge(value:{value: number, min?: number, max?: number}) +Gauge(options:{value: number, min?: number, max?: number}) - Parameters - | Name| Type| Mandatory| Default Value| Description| + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | | value | number | Yes| - | Current data value.| | min | number | No| 0 | Minimum value of the current data segment.| @@ -38,9 +37,17 @@ Gauge(value:{value: number, min?: number, max?: number}) | value | number | 0 | Value of the chart.| | startAngle | number | -150 | Start angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.| | endAngle | number | 150 | End angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.| -| colors | Array<any> | - | Colors of the chart. Solid colors and gradients are supported.| +| colors | Array<ColorStop> | - | Colors of the chart. Colors can be set for individual segments.| | strokeWidth | Length | - | Stroke width of the chart.| +## ColorStop + +Describes a gradient stop. + +| Name | Type | Description | +| --------- | -------------------- | ------------------------------------------------------------ | +| ColorStop | [[ResourceColor](../../ui/ts-types.md#resourcecolor8), 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.| + ## Example 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 061ba635797cf34d31acffbbb553bf7557a3066e..9a4f45646309aec1858c2ddc93b96109e55d4d51 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 @@ -1,51 +1,55 @@ # Circle + The **\** component is used to draw a circle. -> **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **** component is used to draw a circle. - - -## Required Permissions - -None +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components -None +Not supported ## APIs -Circle(options?: {width: Length, height: Length}) +Circle(options?: {width?: string | number, height?: string | number}) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | Options of the circle to draw. For details, see the **options** parameters. | - -- options parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Width. | - | height | Length | Yes | - | Height. | + | width | string \| number | No| 0 | Width of the circle. | + | height | string \| number | No| 0 | Height of the circle. | +| Name| Type| Mandatory| Default Value| Description| +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | Yes| - | Width.| +| height | string \| number | Yes| - | Height.| ## Attributes -| Name | Type | Default Value | Mandatory | Description | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name| Type| Default Value| Mandatory| Description| | -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width of the rectangle where the circle is located. | -| height | Length | 0 | No | Height of the rectangle where the circle is located. | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.| +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.| +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.| +| strokeDashArray | Array<Length> | [] | No| Stroke dashes.| +| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.| +| strokeWidth | Length | 1 | No| Stroke width.| +| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| ## Example - ```ts +// xxx.ets @Entry @Component struct CircleExample { @@ -60,4 +64,4 @@ struct CircleExample { } ``` -![en-us_image_0000001256978353](figures/en-us_image_0000001256978353.png) \ No newline at end of file +![en-us_image_0000001256978353](figures/en-us_image_0000001256978353.png) 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 f1a1eff7e1bd726b3620e9d0c02d66c5bae524dc..adb16e806bc481bb70481e8c1feed9dc22b5d782 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 @@ -1,11 +1,11 @@ # Ellipse -> **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +The **\** component is used to draw an ellipse. - -The **** component is used to draw an ellipse. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -15,37 +15,43 @@ None ## Child Components -None +Not supported ## APIs -ellipse(options?: {width: Length, height: Length}) +ellipse(options?: {width?: string | number, height?: string | number}) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | Options of the ellipse to draw. For details, see the **options** parameters. | - -- options parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Width of the ellipse. | - | height | Length | Yes | - | Height of the ellipse. | + | width | string \| number | No| 0 | Width of the ellipse. | + | height | string \| number | No| 0 | Height of the ellipse. | ## Attributes -| Name | Type | Default Value | Mandatory | Description | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name| Type| Default Value| Mandatory| Description| | -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width of the rectangle where the ellipse is located. | -| height | Length | 0 | No | Height of the rectangle where the ellipse is located. | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.| +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Opacity of the fill area.| +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No|Stroke color.| +| strokeDashArray | Array<Length> | [] | No| Stroke dash.| +| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Stroke opacity.| +| strokeWidth | Length | 1 | No| Stroke width.| +| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| ## Example - ```ts +// xxx.ets @Entry @Component struct EllipseExample { @@ -60,4 +66,4 @@ struct EllipseExample { } ``` -![en-us_image_0000001212058488](figures/en-us_image_0000001212058488.png) \ No newline at end of file +![en-us_image_0000001212058488](figures/en-us_image_0000001212058488.png) 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 88e77173c6f123c627a6701e8a1914b7d49f5233..942bc08a5a204dc69c767c0ea9222d9a874d723a 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,11 +1,11 @@ # Line -> **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +The **\** component is used to draw a straight 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 @@ -15,39 +15,45 @@ None ## Child Components -None +Not supported ## APIs -Line(options?: {width: Length, height: Length}) +Line(options?: {width?: string | number, height?: string | number}) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | Options of the line to draw. For details, see the **options** parameters. | - -- options parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Line width. | - | height | Length | Yes | - | Line height. | + | width | string \| number | No| 0 | Width of the line. | + | height | string \| number | No| 0 | Height of the line. | ## Attributes -| Name | Type | Default Value | Mandatory | Description | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name| Type| Default Value| Mandatory| Description| | -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width of the rectangle where the straight line is located. | -| height | Length | 0 | No | Height of the rectangle where the straight line is located. | -| startPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the start point of the straight line. | -| endPoint | Point | [0, 0] | Yes | Coordinate (relative coordinate) of the end point of the straight line. | +| startPoint | Array | [0, 0] | Yes | Coordinates (relative coordinates) of the start point of the line. | +| endPoint | Array | [0, 0] | Yes | Coordinates (relative coordinates) of the end point of the line. | +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.| +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Opacity of the fill area.| +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.| +| strokeDashArray | Array<Length> | [] | No| Stroke dashes.| +| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Stroke opacity.| +| strokeWidth | Length | 1 | No| Stroke width.| +| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| ## Example - ```ts +// xxx.ets @Entry @Component struct LineExample { @@ -60,4 +66,4 @@ struct LineExample { } ``` -![en-us_image_0000001256858387](figures/en-us_image_0000001256858387.jpg) \ No newline at end of file +![en-us_image_0000001256858387](figures/en-us_image_0000001256858387.jpg) 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 8d0cbed6ce56082885d6d41370291a02ff15db11..c2b8df0451a9154cc889d325850042455bc9c1e9 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 @@ -1,11 +1,11 @@ # Polygon -> **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +The **\** component is used to draw a polygon. - -The **** component is used to draw a polygon. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -15,38 +15,52 @@ None ## Child Components -None +Not supported ## APIs -Polygon(value:{options?: {width: Length, height: Length}}) +Polygon(options?: {width?: string | number, height?: string | number}) - Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | Options of the polygon to draw. For details, see the **options** parameters. | - -- options parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Width of the polygon. | - | height | Length | Yes | - | Height of the polygon. | + | width | string \| number | No| 0 | Width of the polygon. | + | height | string \| number | No| 0 | Height of the polygon. | ## Attributes -| Name | Type | Default Value | Mandatory | Description | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name| Type| Default Value| Mandatory| Description| | -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width of the rectangle where the polygon is located. | -| height | Length | 0 | No | Height of the rectangle where the polygon is located. | -| points | Array<Point> | - | Yes | Vertex coordinates of the polygon. | +| points | Array<Point> | [] | No| Vertex coordinates of the polygon.| +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.| +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Opacity of the fill area.| +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.| +| strokeDashArray | Array<Length> | [] | No| Stroke dashes.| +| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource)| 1 | No| Stroke opacity.| +| strokeWidth | Length | 1 | No| Stroke width.| +| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| + +## Point + +Describes the coordinates of a point. + +| Name | Type | Description | +| --------- | -------------------- | ------------------------------------------------------------ | +| Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).| ## Example - ```ts +// xxx.ets @Entry @Component struct PolygonExample { @@ -55,7 +69,7 @@ struct PolygonExample { Flex({ justifyContent: FlexAlign.SpaceAround }) { // Draw a triangle in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (50, 100). Polygon({ width: 100, height: 100 }).points([[0, 0], [50, 100], [100, 0]]) - // Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (100, 100). + // Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing points are (0, 100) and (100, 100). Polygon().width(100).height(100).points([[0, 0], [0, 100], [100, 100], [100, 0]]) // Draw a pentagon in a 100 x 100 rectangle. The start point is (50, 0), the end point is (100, 50), and the passing points are (0, 50), (20, 100), and (80, 100). Polygon().width(100).height(100).points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) 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 cb7d549bf6cb5c379175563c4f6c23c3aaa48dff..e973985191f262e7213500a973352b23e2347cee 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 @@ -1,11 +1,11 @@ # Polyline -> **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +The **\** component is used to draw a polyline. - -The **** component is used to draw a polyline. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -15,38 +15,51 @@ None ## Child Components -None +Not supported ## APIs -Polyline(options?: {width: Length, height: Length}) +Polyline(options?: {width?: string | number, height?: string | number}) - Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | Options of the polyline to draw. For details, see the **options** parameters. | - -- options parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Width of the polyline. | - | height | Length | Yes | - | Height of the polyline. | + | width | string \| number | No| 0 | Width of the polyline. | + | height | string \| number | No| 0 | Height of the polyline. | ## Attributes -| Name | Type | Default Value | Mandatory | Description | -| -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width of the rectangle where the polyline is located. | -| height | Length | 0 | No | Height of the rectangle where the polyline is located. | -| points | Array<Point> | - | Yes | List of coordinates that the polyline passes through. | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| points | Array<Point> | [] | No| List of coordinates that the polyline passes through.| +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.| +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.| +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.| +| strokeDashArray | Array<Length> | [] | No| Stroke dashes.| +| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.| +| strokeWidth | Length | 1 | No| Stroke width.| +| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| + +## Point + +Describes the coordinates of a point. + +| Name | Type | Description | +| --------- | -------------------- | ------------------------------------------------------------ | +| Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).| ## Example - ```ts +// xxx.ets @Entry @Component struct PolylineExample { @@ -63,4 +76,4 @@ struct PolylineExample { } ``` -![en-us_image_0000001212218432](figures/en-us_image_0000001212218432.gif) \ No newline at end of file +![en-us_image_0000001212218432](figures/en-us_image_0000001212218432.gif) 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 88749561851f713382b1047679d426ab34d3df39..64cdfd0dae64ee131d93bd57d428d1f7f6b8dc4b 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 @@ -1,12 +1,11 @@ # Rect -> **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **** component is used to draw a rectangle. +The **\** component is used to draw a rectangle. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -15,43 +14,50 @@ None ## Child Components -None +Not supported ## APIs -Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array<Length>} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}}) +Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array<string | number>} | + {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | options | Object | No | - | Options of the rectangle to draw. For details, see the **options** parameters. | - -- options parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | width | Length | Yes | - | Width of the rectangle. | - | height | Length | Yes | - | Height of the rectangle. | - | radius | Length \| Array<Length> | No | 0 | Radius of the rounded corner. You can set the radius of four rounded corners. | - | radiusWidth | Length | No | 0 | Width of the rounded corner. | - | radiusHeight | Length | No | 0 | Height of the rounded corner. | + | width | string \| number | No| 0 | Width of the rectangle. | + | height | string \| number | No| 0 | Height of the rectangle. | + | radius | string \| number \| Array<string \| number> | No| 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.| + | radiusWidth | string \| number | No| 0 | Width of the rounded corner.| + | radiusHeight | string \| number | No| 0 | Height of the rounded corner.| ## Attributes -| Name | Type | Default Value | Mandatory | Description | +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name| Type| Default Value| Mandatory| Description| | -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | No | Width of the rectangle. | -| height | Length | 0 | No | Height of the rectangle. | -| radiusWidth | Length | 0 | No | Width of the rounded corner. The width and height are the same when only the width is set. | -| radiusHeight | Length | 0 | No | Height of the rounded corner. The width and height are the same only when the height is set. | -| radius | Length \| Array<Length> | 0 | No | Radius of the rounded corner. | +| radiusWidth | string \| number | 0 | No| Width of the rounded corner. The width and height are the same when only the width is set.| +| radiusHeight | string \| number | 0 | No| Height of the rounded corner. The width and height are the same only when the height is set.| +| radius | string \| number \| Array<string \| number> | 0 | No| Radius of the rounded corner. You can set separate radiuses for four rounded corners.| +| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Color of the fill area.| +| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Opacity of the fill area.| +| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | No| Stroke color.| +| strokeDashArray | Array<Length> | [] | No| Stroke dash.| +| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.| +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.| +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.| +| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.| +| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource-type)| 1 | No| Stroke opacity.| +| strokeWidth | Length | 1 | No| Stroke width.| +| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.| ## Example - ```ts +// xxx.ets @Entry @Component struct RectExample { @@ -73,4 +79,4 @@ struct RectExample { } ``` -![en-us_image_0000001212218454](figures/en-us_image_0000001212218454.png) \ No newline at end of file +![en-us_image_0000001212218454](figures/en-us_image_0000001212218454.png)