1# Types 2 3>**NOTE** 4> 5>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. 6 7## Resource 8 9The **Resource** type is used to reference resources for setting component attributes. 10 11You can use `$r` or `$rawfile` to create a **Resource** object, but its attribute values cannot be changed. 12 13- `$r('belonging.type.name')` 14 15 **belonging**: group to which the resource belongs, which can be **'sys'** or **'app'**. 16 17 **type**: resource type, which can be '**boolean'**, **'color'**, **'float'**, **'intarray'**, **'integer'**, **'pattern'**, '**plural'**, **'strarray'**, **'string'**, or **'media'**. 18 19 **name**: resource name, which is determined during resource definition. 20 21- `$rawfile('filename')` 22 23 **filename**: name of the file in the **resources/rawfile** directory of the project. 24 25 > **NOTE** 26 > 27 > 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. 28 29## Length 30 31The **Length** type is used to represent a size unit. 32 33| Type | Description | 34| --------------------- | -------------------------------------- | 35| string | String type. Specify the length unit explicitly, for example, **'10px'**, or provide the length in percentage, for example, **'100%'**.| 36| number | Number type. The default unit is vp. | 37| [Resource](#resource) | Size referenced from system or application resources. | 38 39## ResourceStr 40 41The **ResourceStr** type is used to represent the types that can be used by input parameters of the string type. 42 43| Type | Description | 44| --------------------- | ------------------------- | 45| string | String type. | 46| [Resource](#resource) | String referenced from system or application resources.| 47 48## Padding 49 50The **Padding** type is used to describe the paddings in different directions of a component. 51 52| Name | Type | Mandatory | Description | 53| ------ | ----------------- | ---- | -------------------- | 54| top | [Length](#length) | No | Height of the padding on the top of the component. | 55| right | [Length](#length) | No | Width of the padding on the right of the component.| 56| bottom | [Length](#length) | No | Height of the padding at the bottom of the component. | 57| left | [Length](#length) | No | Width of the padding on the left of the component.| 58 59## Margin 60 61The **Margin** type is used to describe the margins in different directions of a component. 62 63| Name | Type | Mandatory | Description | 64| ------ | ----------------- | ---- | -------------------- | 65| top | [Length](#length) | No | Height of the margin above the component. | 66| right | [Length](#length) | No | Width of the margin on the right of the component.| 67| bottom | [Length](#length) | No | Height of the margin below the component. | 68| left | [Length](#length) | No | Width of the margin on the left of the component.| 69 70## EdgeWidths<sup>9+</sup> 71 72The **EdgeWidths** type is used to describe the edge widths in different directions of a component. 73 74| Name | Type | Mandatory | Description | 75| ------ | ----------------- | ---- | -------- | 76| top | [Length](#length) | No | Width of the top edge of the component.| 77| right | [Length](#length) | No | Width of the right edge of the component.| 78| bottom | [Length](#length) | No | Width of the bottom edge of the component.| 79| left | [Length](#length) | No | Width of the left edge of the component.| 80 81## BorderRadiuses<sup>9+</sup> 82 83The **BorderRadiuses** type is used to describe the radius of the rounded corners of a component. 84 85| Name | Type | Mandatory | Description | 86| ----------- | ----------------- | ---- | ---------- | 87| topLeft | [Length](#length) | No | Radius of the top left rounded corner of the component.| 88| topRight | [Length](#length) | No | Radius of the top right rounded corner of the component.| 89| bottomLeft | [Length](#length) | No | Radius of the bottom left rounded corner of the component.| 90| bottomRight | [Length](#length) | No | Radius of the bottom right rounded corner of the component.| 91 92## EdgeColors<sup>9+</sup> 93 94The **EdgeColors** type is used to describe the edge colors of a component. 95 96| Name | Type | Mandatory | Description | 97| ------ | ------------------------------- | ---- | -------- | 98| top | [ResourceColor](#resourcecolor) | No | Color of the top edge of the component.| 99| right | [ResourceColor](#resourcecolor) | No | Color of the right edge of the component.| 100| bottom | [ResourceColor](#resourcecolor) | No | Color of the bottom edge of the component.| 101| left | [ResourceColor](#resourcecolor) | No | Color of the left edge of the component.| 102 103## EdgeStyles<sup>9+</sup> 104 105The **EdgeStyles** type is used to describe the edge styles of a component. 106 107| Name | Type | Mandatory | Description | 108| ------ | ---------------------------------------- | ---- | -------- | 109| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the top edge of the component.| 110| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the right edge of the component.| 111| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the bottom edge of the component.| 112| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the left edge of the component.| 113 114 115## Offset 116 117The **Offset** type is used to describe the offset coordinates of a component in the layout. 118 119| Name | Type | Mandatory | Description | 120| ---- | ----------------- | ---- | -------- | 121| dx | [Length](#length) | Yes | X coordinate of the offset.| 122| dy | [Length](#length) | Yes | Y coordinate of the offset.| 123 124## ResourceColor 125 126The **ResourceColor** type is used to describe the color types of resources. 127 128| Type | Description | 129| ----------------------------------- | ---------------------------------------- | 130| [Color](ts-appendix-enums.md#color) | Color enums. | 131| number | Color in hexadecimal notation. RGB is supported. Example: **0xffffff** | 132| string | Color in RGB or ARGB notation. Example: **'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'**| 133| [Resource](#resource) | Color referenced from system or application resources. | 134 135## ColoringStrategy 136 137The **ColoringStrategy** type is used to describe the foreground colors. 138 139| Name | Description | 140| ------ | --------------- | 141| INVERT | Inverse of the component background color.| 142 143## LengthConstrain 144 145The **LengthConstrain** type is used to describe the maximum and minimum lengths of a component. 146 147| Name | Type | Mandatory | Description | 148| --------- | ----------------- | ---- | ------- | 149| minLength | [Length](#length) | Yes | Minimum length of the component.| 150| maxLength | [Length](#length) | Yes | Maximum length of the component.| 151 152 153## Font 154 155The **Font** type is used to set the text style. 156 157| Name | Type | Mandatory | Description | 158| ------ | ---------------------------------------- | ---- | ---------------------------------------- | 159| 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.<br>Default value: **16.0** | 160| 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. A larger value indicates a thicker font.<br>Default value: **400** \| **FontWeight.Normal** | 161| 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, HarmonyOS Sans'**. The HarmonyOS Sans font and [register custom fonts](../apis/js-apis-font.md) are supported.| 162| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style.<br>Default value: **FontStyle.Normal** | 163 164## Area<sup>8+</sup> 165 166The **Area** type is used to describe the area information of a component. 167 168| Name | Type | Description | 169| -------------- | ---------------------- | ------------------------------ | 170| width | [Length](#length) | Width of the component. The value is of the number type in vp when used as the return value.| 171| height | [Length](#length) | Height of the component. The value is of the number type in vp when used as the return value.| 172| position | [Position](#position8) | Position of the upper left corner of the component relative to that of its parent container. | 173| globalPosition | [Position](#position8) | Position of the upper left corner of the component relative to that of the page where the component resides. | 174 175## Position<sup>8+</sup> 176 177The **Position** type is used to represent coordinates of a point. 178 179| Name | Type | Mandatory | Description | 180| ---- | ----------------- | ---- | --------------------------- | 181| x | [Length](#length) | No | X coordinate. The value is of the number type in vp when used as the return value.| 182| y | [Length](#length) | No | Y coordinate. The value is of the number type in vp when used as the return value.| 183 184## ConstraintSizeOptions 185 186The **ConstraintSizeOptions** type is used to set the size constraints of a component during component layout. 187 188| Name | Type | Mandatory | Description | 189| --------- | ----------------- | ---- | ------- | 190| minWidth | [Length](#length) | No | Minimum width of the component.| 191| maxWidth | [Length](#length) | No | Maximum width of the component.| 192| minHeight | [Length](#length) | No | Minimum height of the component.| 193| maxHeight | [Length](#length) | No | Maximum height of the component.| 194 195## SizeOptions 196 197The **SizeOptions** type is used to set the width and height. 198 199| Name | Type | Mandatory | Description | 200| ------ | ----------------- | ---- | ----- | 201| width | [Length](#length) | No | Width of the component.| 202| height | [Length](#length) | No | Height of the component.| 203 204 205## BorderOptions 206 207The **BorderOptions** type is used to provide border information. 208 209| Name | Type | Mandatory | Description | 210| ------ | ---------------------------------------- | ---- | ------- | 211| width | [Length](#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> | No | Border width. | 212| color | [ResourceColor](#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> | No | Border color. | 213| radius | [Length](#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> | No | Radius of the rounded corner border.| 214| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | No | Border style. | 215 216## ColorFilter<sup>9+</sup> 217 218The **ColorFilter** type is used to create a color filter with a 4 x 5 matrix. 219 220| Name | Type | Mandatory | Description | 221| ----------- | -------- | ---- | ---------------------------------------- | 222| 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 value range is [0, 1]. The matrix is row-first.| 223 224 225## CustomBuilder<sup>8+</sup> 226 227The **CustomBuilder** type is used to define custom UI descriptions in component attribute methods. 228 229| Name | Type | Description | 230| ------------- | ---------------------- | ---------------------------------------- | 231| CustomBuilder | () => any | Builder for creating a custom component; must be used with @Builder. For details, see [@Builder](../../quick-start/arkts-builder.md).| 232 233## PixelStretchEffectOptions<sup>10+</sup> 234 235The **PixelStretchEffectOptions** type is used to describe the pixel stretch effect options. 236 237| Name | Type | Mandatory | Description | 238| ------ | ----------------- | ---- | -------------- | 239| left | [Length](#length) | No | Length by which a pixel is stretched towards the left edge of the image. | 240| right | [Length](#length) | No | Length by which a pixel is stretched towards the right edge of the image.| 241| top | [Length](#length) | No | Length by which a pixel is stretched towards the top edge of the image.| 242| bottom | [Length](#length) | No | Length by which a pixel is stretched towards the bottom edge of the image.| 243 244## ModalTransition<sup>10+</sup> 245 246The **ModalTransition** type is used to set the transition type for a full-screen modal. 247 248| Name | Description | 249| ------- | ------------ | 250| NONE | No transition animation for the modal. | 251| DEFAULT | Slide-up and slide-down animation for the modal. | 252| ALPHA | Opacity gradient animation for the modal.| 253 254## Dimension<sup>10+</sup> 255 256The **Length** type is used to represent a size unit. 257 258| Type | Description | 259| --------------------- | -------------------------------------- | 260| [PX](#px10) | Physical pixel unit type. The unit px must be included, for example, **'10px'**.| 261| [VP](#vp10) | Pixel unit type specific to the screen density. The unit vp can be included or omitted, for example, **10** or **'10vp'**.| 262| [FP](#fp10) | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.| 263| [LPX](#lpx10) | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.| 264| [Percentage](#percentage10) | Percentage type. The unit % must be included, for example, **'10%'**.| 265| [Resource](#resource) | Size referenced from system or application resources.| 266 267## PX<sup>10+</sup> 268 269The **PX** type is used to represent a length in px. 270 271| Type | Description | 272| --------------------- | -------------------------------------- | 273| {number}px | Physical pixel unit type. The unit px must be included, for example, **'10px'**.| 274 275## VP<sup>10+</sup> 276 277The **VP** type is used to represent a length in vp. 278 279| Type | Description | 280| --------------------- | -------------------------------------- | 281| {number}vp\|number | Pixel unit type specific to the screen density. The unit vp can be included or omitted, for example, **10** or **'10vp'**.| 282 283## FP<sup>10+</sup> 284 285The **FP** type is used to represent a length in fp. 286 287| Type | Description | 288| --------------------- | -------------------------------------- | 289| {number}fp | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.| 290 291## LPX<sup>10+</sup> 292 293The **LPX** type is used to represent a length in lpx. 294 295| Type | Description | 296| --------------------- | -------------------------------------- | 297| {number}lpx | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.| 298 299## Percentage<sup>10+</sup> 300 301The **Percentage** type is used to represent a length in percentage. 302 303| Type | Description | 304| --------------------- | -------------------------------------- | 305| {number}% | Percentage type. The unit % must be included, for example, **'10%'**.| 306 307## Degree<sup>10+</sup> 308 309The **Degree** type is used to represent a length in deg. 310 311| Type | Description | 312| --------------------- | -------------------------------------- | 313| {number}deg | Degree type. The unit deg must be included, for example, **'10deg'**.| 314 315## SwiperAnimationEvent<sup>10+</sup> 316 317Describes the animation information of the \<Swiper> component. 318 319| Name | Type | Description | 320| ------------- | ---------------------- | ---------------------------------------- | 321| currentOffset | number | Offset of the currently displayed element relative to the start position of the **\<Swiper>** along the main axis. Unit: vp<br>Default value: **0**| 322| targetOffset | number | Offset of the target element relative to the start position of the **\<Swiper>** along the main axis. Unit: vp<br>Default value: **0**| 323| velocity | number | Hands-off velocity at the beginning of the animation. Unit: vp/s<br>Default value: **0**| 324## SafeAreaType<sup>10+</sup> 325 326The **SafeAreaType** type is used to describe the types of expanded safe areas. 327 328| Name | Description | 329| -------- | ------------------------------------------ | 330| SYSTEM | Default non-safe area of the system, including the status bar and navigation bar. | 331| CUTOUT | Non-safe area of the device, for example, the notch area.| 332| KEYBOARD | Soft keyboard area. | 333 334## SafeAreaEdge<sup>10+</sup> 335 336The **SafeAreaEdge** type is used to define the edge for expanding the safe area. 337 338| Name | Description | 339| ------ | ---------- | 340| TOP | Top edge.| 341| BOTTOM | Bottom edge.| 342| START | Start edge.| 343| END | End edge.| 344