1# Types 2 3## Resource 4 5The **Resource** type is used to reference resources for setting component attributes. 6 7You can use `$r` or `$rawfile` to create a **Resource** object, but its attribute values cannot be changed. 8 9- `$r('belonging.type.name')` 10 11 **belonging**: group to which the resource belongs, which can be **'sys'** or **'app'**. 12 13 **type**: resource type, which can be **'color'**, **'float'**, **'string'**, or **'media'**. 14 15 **name**: resource name, which is determined during resource definition. 16 17- `$rawfile('filename')` 18 19 **filename**: name of the file in the **resources/rawfile** directory of the project. 20 21 > **NOTE** 22 > 23 > When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string. 24 25## Length 26 27The **Length** type is used to represent a size unit. 28 29| Type | Description | 30| -------- | -------------------------------------- | 31| string | String type. Specify the length unit explicitly, for example, **'10px'**, or provide the length in percentage, for example, **'100%'**.| 32| number | Number type. The default unit is vp. | 33| [Resource](#resource) | Size referenced from system or application resources. | 34 35## ResourceStr 36 37The **ResourceStr** type is used to represent the types that can be used by input parameters of the string type. 38 39| Type | Description | 40| -------- | ---------------------------- | 41| string | String type. | 42| [Resource](#resource) | String referenced from system or application resources.| 43 44## Padding 45 46The **Padding** type is used to describe the paddings in different directions of a component. 47 48| Name | Type | Mandatory | Description | 49| ------ | ------ | ---- | --------------- | 50| top | [Length](#length) | No | Height of the padding on the top of the component. | 51| right | [Length](#length) | No | Width of the padding on the right of the component.| 52| bottom | [Length](#length) | No | Height of the padding at the bottom of the component. | 53| left | [Length](#length) | No | Width of the padding on the left of the component.| 54 55## Margin 56 57The **Margin** type is used to describe the margins in different directions of a component. 58 59| Name | Type | Mandatory | Description | 60| ------ | ------ | ---- | --------------- | 61| top | [Length](#length) | No | Height of the margin above the component. | 62| right | [Length](#length) | No | Width of the margin on the right of the component.| 63| bottom | [Length](#length) | No | Height of the margin below the component. | 64| left | [Length](#length) | No | Width of the margin on the left of the component.| 65 66## EdgeWidths<sup>9+</sup> 67 68The **EdgeWidths** type is used to describe the edge widths in different directions of a component. 69 70| Name | Type | Mandatory | Description | 71| ------ | ------ | ---- | -------- | 72| top | [Length](#length) | No | Width of the top edge of the component.| 73| right | [Length](#length) | No | Width of the right edge of the component.| 74| bottom | [Length](#length) | No | Width of the bottom edge of the component.| 75| left | [Length](#length) | No | Width of the left edge of the component.| 76 77## BorderRadiuses<sup>9+</sup> 78 79The **BorderRadiuses** type is used to describe the radius of the rounded corners of a component. 80 81| Name | Type | Mandatory | Description | 82| ----------- | ------ | ---- | ---------- | 83| topLeft | [Length](#length) | No | Radius of the top left rounded corner of the component.| 84| topRight | [Length](#length) | No | Radius of the top right rounded corner of the component.| 85| bottomLeft | [Length](#length) | No | Radius of the bottom left rounded corner of the component.| 86| bottomRight | [Length](#length) | No | Radius of the bottom right rounded corner of the component.| 87 88## EdgeColors<sup>9+</sup> 89 90The **EdgeColors** type is used to describe the edge colors of a component. 91 92| Name | Type | Mandatory | Description | 93| ------ | ------------- | ---- | -------- | 94| top | [ResourceColor](#resourcecolor) | No | Color of the top edge of the component.| 95| right | [ResourceColor](#resourcecolor) | No | Color of the right edge of the component.| 96| bottom | [ResourceColor](#resourcecolor) | No | Color of the bottom edge of the component.| 97| left | [ResourceColor](#resourcecolor) | No | Color of the left edge of the component.| 98 99## EdgeStyles<sup>9+</sup> 100 101The **EdgeStyles** type is used to describe the edge styles of a component. 102 103| Name | Type | Mandatory | Description | 104| ------ | ----------- | ---- | -------- | 105| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the top edge of the component.| 106| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the right edge of the component.| 107| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the bottom edge of the component.| 108| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the left edge of the component.| 109 110 111## Offset 112 113The **Offset** type is used to describe the offset coordinates of a component in the layout. 114 115| Name | Type | Mandatory | Description | 116| ---- | ------ | ---- | -------- | 117| dx | [Length](#length) | Yes | X coordinate of the offset.| 118| dy | [Length](#length) | Yes | Y coordinate of the offset.| 119 120## ResourceColor 121 122The **ResourceColor** type is used to describe the color types of resources. 123 124| Type | Description | 125| ---------------------------------------- | ------------------------------------------------- | 126| [Color](ts-appendix-enums.md#color) | Color enums. | 127| number | Color in hexadecimal notation. RGB is supported. | 128| string | Color in RGB or RGBA notation. | 129| [Resource](#resource) | Color referenced from system or application resources.| 130 131## LengthConstrain 132 133The **LengthConstrain** type is used to describe the maximum and minimum lengths of a component. 134 135| Name | Type | Mandatory | Description | 136| --------- | ------ | ---- | ------- | 137| minLength | [Length](#length) | Yes | Minimum length of the component.| 138| maxLength | [Length](#length) | Yes | Maximum length of the component.| 139 140 141## Font 142 143The **Font** type is used to set the text style. 144 145| Name | Type | Mandatory| Description | 146| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 147| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.| 148| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.| 149| family | string \| [Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**. Currently, only the **'sans-serif'** font is supported.| 150| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style. | 151 152## Area<sup>8+</sup> 153 154The **Area** type is used to describe the area information of a component. 155 156| Name | Type | Description | 157| -------------- | ---------------------- | ------------------------------ | 158| width | [Length](#length) | Width of the component. The value is of the number type in vp when used as the return value.| 159| height | [Length](#length) | Height of the component. The value is of the number type in vp when used as the return value.| 160| position | [Position](#position8) | Position of the upper left corner of the component relative to that of its parent container. | 161| globalPosition | [Position](#position8) | Position of the upper left corner of the component relative to that of the page where the component resides. | 162 163## Position<sup>8+</sup> 164 165The **Position** type is used to represent coordinates of a point. 166 167| Name | Type | Mandatory | Description | 168| ---- | ------ | ---- | --------------------------- | 169| x | [Length](#length) | No | X coordinate. The value is of the number type in vp when used as the return value.| 170| y | [Length](#length) | No | Y coordinate. The value is of the number type in vp when used as the return value.| 171 172## ConstraintSizeOptions 173 174The **ConstraintSizeOptions** type is used to set the size constraints of a component during component layout. 175 176| Name | Type | Mandatory | Description | 177| --------- | ------ | ---- | ------- | 178| minWidth | [Length](#length) | No | Minimum width of the component.| 179| maxWidth | [Length](#length) | No | Maximum width of the component.| 180| minHeight | [Length](#length) | No | Minimum height of the component.| 181| maxHeight | [Length](#length) | No | Maximum height of the component.| 182 183## SizeOptions 184 185The **SizeOptions** type is used to set the width and height. 186 187| Name | Type | Mandatory | Description | 188| ------ | ------ | ---- | ----- | 189| width | [Length](#length) | No | Width of the component.| 190| height | [Length](#length) | No | Height of the component.| 191 192 193## BorderOptions 194 195The **BorderOptions** type is used to provide border information. 196 197| Name | Type | Mandatory | Description | 198| ------ | ---------------------------------------- | ---- | ------- | 199| width | [Length](#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> | No | Border width. | 200| color | [ResourceColor](#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> | No | Border color. | 201| radius | [Length](#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> | No | Radius of the rounded corner border.| 202| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | No | Border style. | 203 204## ColorFilter<sup>9+</sup> 205 206The **ColorFilter** type is used to create a color filter with a 4 x 5 matrix. 207 208| Name | Type | Mandatory | Description | 209| ----------- | -------- | ---- | ---------------------------------------- | 210| constructor | number[] | Yes | Constructor for creating a color filter with a 4 x 5 matrix. The input parameter is [m*n], which is the matrix value in row m and column n. The matrix is row-first.| 211 212 213## CustomBuilder<sup>8+</sup> 214 215The **CustomBuilder** type is used to define custom UI descriptions in component attribute methods. 216 217| Name | Type | Description | 218| ------------- | ---------------------- | ---------------------------------------- | 219| CustomBuilder | () => any | Must be decorated by **@Builder**. For details, see [@Builder](../../quick-start/arkts-dynamic-ui-elememt-building.md#builder).| 220 221