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## RectResult<sup>10+</sup> 125 126The **RectResult** type is used to describe the position, width, and height of a component. 127 128| Name | Type | Description| 129| ------- | ------ | ----------------------- | 130| x | number | Horizontal coordinate.| 131| y | number | Vertical coordinate.| 132| width | number | Content width.| 133| height | number | Content height.| 134 135## ResourceColor 136 137The **ResourceColor** type is used to describe the color types of resources. 138 139| Type | Description | 140| ----------------------------------- | ---------------------------------------- | 141| [Color](ts-appendix-enums.md#color) | Color enums. | 142| number | Color in hexadecimal notation. RGB is supported. Example: **0xffffff** | 143| string | Color in RGB or ARGB notation. Example: **'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'**| 144| [Resource](#resource) | Color referenced from system or application resources. | 145 146## ColoringStrategy<sup>10+</sup> 147 148The **ColoringStrategy** type is used to describe the foreground and shadow colors. 149 150| Name | Description | 151| ------ | --------------- | 152| INVERT | The foreground colors are the inverse of the component background colors.| 153| AVERAGE<sup>11+</sup> | The shadow colors of the component are the average color obtained from the component background shadow area.| 154| PRIMARY<sup>11+</sup> | The shadow colors of the component are the primary color obtained from the component background shadow area.| 155 156## LengthConstrain 157 158The **LengthConstrain** type is used to describe the maximum and minimum lengths of a component. 159 160| Name | Type | Mandatory | Description | 161| --------- | ----------------- | ---- | ------- | 162| minLength | [Length](#length) | Yes | Minimum length of the component.| 163| maxLength | [Length](#length) | Yes | Maximum length of the component.| 164 165 166## Font 167 168The **Font** type is used to set the text style. 169 170| Name | Type | Mandatory | Description | 171| ------ | ---------------------------------------- | ---- | ---------------------------------------- | 172| 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** | 173| 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** | 174| 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.| 175| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style.<br>Default value: **FontStyle.Normal** | 176 177## Area<sup>8+</sup> 178 179The **Area** type is used to describe the area information of a component. 180 181| Name | Type | Description | 182| -------------- | ---------------------- | ------------------------------ | 183| width | [Length](#length) | Width of the component. The value is of the number type in vp when used as the return value.| 184| height | [Length](#length) | Height of the component. The value is of the number type in vp when used as the return value.| 185| position | [Position](#position8) | Position of the upper left corner of the component relative to that of its parent container. | 186| globalPosition | [Position](#position8) | Position of the upper left corner of the component relative to that of the page where the component resides. | 187 188## Position<sup>8+</sup> 189 190The **Position** type is used to represent coordinates of a point. 191 192| Name | Type | Mandatory | Description | 193| ---- | ----------------- | ---- | --------------------------- | 194| x | [Length](#length) | No | X coordinate. The value is of the number type in vp when used as the return value.| 195| y | [Length](#length) | No | Y coordinate. The value is of the number type in vp when used as the return value.| 196 197## ConstraintSizeOptions 198 199The **ConstraintSizeOptions** type is used to set the size constraints of a component during component layout. 200 201| Name | Type | Mandatory | Description | 202| --------- | ----------------- | ---- | ------- | 203| minWidth | [Length](#length) | No | Minimum width of the component.| 204| maxWidth | [Length](#length) | No | Maximum width of the component.| 205| minHeight | [Length](#length) | No | Minimum height of the component.| 206| maxHeight | [Length](#length) | No | Maximum height of the component.| 207 208## SizeOptions 209 210The **SizeOptions** type is used to set the width and height. 211 212| Name | Type | Mandatory | Description | 213| ------ | ----------------- | ---- | ----- | 214| width | [Length](#length) | No | Width of the component.| 215| height | [Length](#length) | No | Height of the component.| 216 217 218## BorderOptions 219 220The **BorderOptions** type is used to provide border information. 221 222| Name | Type | Mandatory | Description | 223| ------ | ---------------------------------------- | ---- | ------- | 224| width | [Length](#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> | No | Border width. | 225| color | [ResourceColor](#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> | No | Border color. | 226| radius | [Length](#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> | No | Radius of the rounded corner border.| 227| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#EdgeStyles9)<sup>9+</sup>| No | Border style. | 228 229## ColorFilter<sup>9+</sup> 230 231The **ColorFilter** type is used to create a color filter with a 4 x 5 matrix. 232 233| Name | Type | Mandatory | Description | 234| ----------- | -------- | ---- | ---------------------------------------- | 235| 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.| 236 237 238## CustomBuilder<sup>8+</sup> 239 240The **CustomBuilder** type is used to define custom UI descriptions in component attribute methods. 241 242| Name | Type | Description | 243| ------------- | ---------------------- | ---------------------------------------- | 244| CustomBuilder | () => any | Builder for creating a custom component; must be used with @Builder. For details, see [@Builder](../../quick-start/arkts-builder.md).| 245 246## PixelStretchEffectOptions<sup>10+</sup> 247 248The **PixelStretchEffectOptions** type is used to describe the pixel stretch effect options. 249 250| Name | Type | Mandatory | Description | 251| ------ | ----------------- | ---- | -------------- | 252| left | [Length](#length) | No | Length by which a pixel is stretched towards the left edge of the image.| 253| right | [Length](#length) | No | Length by which a pixel is stretched towards the right edge of the image.| 254| top | [Length](#length) | No | Length by which a pixel is stretched towards the top edge of the image.| 255| bottom | [Length](#length) | No | Length by which a pixel is stretched towards the bottom edge of the image.| 256 257## ModalTransition<sup>10+</sup> 258 259The **ModalTransition** type is used to set the transition type for a full-screen modal. 260 261| Name | Description | 262| ------- | ------------ | 263| NONE | No transition animation for the modal. | 264| DEFAULT | Slide-up and slide-down animation for the modal. | 265| ALPHA | Opacity gradient animation for the modal.| 266 267## Dimension<sup>10+</sup> 268 269The **Length** type is used to represent a size unit. 270 271| Type | Description | 272| --------------------- | -------------------------------------- | 273| [PX](#px10) | Physical pixel unit type. The unit px must be included, for example, **'10px'**.| 274| [VP](#vp10) | Pixel unit type specific to the screen density. The unit vp can be included or omitted, for example, **10** or **'10vp'**.| 275| [FP](#fp10) | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.| 276| [LPX](#lpx10) | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.| 277| [Percentage](#percentage10) | Percentage type. The unit % must be included, for example, **'10%'**.| 278| [Resource](#resource) | Size referenced from system or application resources.| 279 280## PX<sup>10+</sup> 281 282The **PX** type is used to represent a length in px. 283 284| Type | Description | 285| --------------------- | -------------------------------------- | 286| {number}px | Physical pixel unit type. The unit px must be included, for example, **'10px'**.| 287 288## VP<sup>10+</sup> 289 290The **VP** type is used to represent a length in vp. 291 292| Type | Description | 293| --------------------- | -------------------------------------- | 294| {number}vp\|number | Pixel unit type specific to the screen density. The unit vp can be included or omitted, for example, **10** or **'10vp'**.| 295 296## FP<sup>10+</sup> 297 298The **FP** type is used to represent a length in fp. 299 300| Type | Description | 301| --------------------- | -------------------------------------- | 302| {number}fp | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.| 303 304## LPX<sup>10+</sup> 305 306The **LPX** type is used to represent a length in lpx. 307 308| Type | Description | 309| --------------------- | -------------------------------------- | 310| {number}lpx | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.| 311 312## Percentage<sup>10+</sup> 313 314The **Percentage** type is used to represent a length in percentage. 315 316| Type | Description | 317| --------------------- | -------------------------------------- | 318| {number}% | Percentage type. The unit % must be included, for example, **'10%'**.| 319 320## Degree<sup>10+</sup> 321 322The **Degree** type is used to represent a length in deg. 323 324| Type | Description | 325| --------------------- | -------------------------------------- | 326| {number}deg | Degree type. The unit deg must be included, for example, **'10deg'**.| 327 328## SwiperAnimationEvent<sup>10+</sup> 329 330Describes the animation information of the \<Swiper> component. 331 332| Name | Type | Mandatory | Description | 333| ------------- | ---------------------- | ---------|------------------------------- | 334| currentOffset | number | Yes| Offset of the currently displayed element relative to the start position of the **\<Swiper>** along the main axis. Unit: vp<br>Default value: **0**| 335| targetOffset | number | Yes| Offset of the target element relative to the start position of the **\<Swiper>** along the main axis. Unit: vp<br>Default value: **0**| 336| velocity | number | Yes| Hands-off velocity at the beginning of the animation. Unit: VP/S<br>Default value: **0**| 337 338## TabsAnimationEvent<sup>11+</sup> 339 340The **TabsAnimationEvent** type is used to describe the animation information of the **\<Tabs>** component. 341 342| Name | Type | Mandatory | Description | 343| ------------- | ---------------------- | ----------------|------------------------ | 344| currentOffset | number | Yes| Offset of the currently displayed element relative to the start position of the **\<Tabs>** along the main axis. Unit: vp<br>Default value: **0**| 345| targetOffset | number | Yes| Offset of the target element relative to the start position of the **\<Tabs>** along the main axis. Unit: vp<br>Default value: **0**| 346| velocity | number | Yes| Hands-off velocity at the beginning of the animation. Unit: VP/S<br>Default value: **0**| 347 348## SafeAreaType<sup>10+</sup> 349 350The **SafeAreaType** type is used to describe the types of expanded safe areas. 351 352| Name | Description | 353| -------- | ------------------------------------------ | 354| SYSTEM | Default non-safe area of the system, including the status bar and navigation bar. | 355| CUTOUT | Non-safe area of the device, for example, the notch area.| 356| KEYBOARD | Soft keyboard area. | 357 358## SafeAreaEdge<sup>10+</sup> 359 360The **SafeAreaEdge** type is used to define the edge for expanding the safe area. 361 362| Name | Description | 363| ------ | ---------- | 364| TOP | Top edge.| 365| BOTTOM | Bottom edge.| 366| START | Start edge.| 367| END | End edge.| 368 369## KeyboardAvoidMode<sup>11+</sup> 370 371The **KeyboardAvoidMode** type is used to define the avoidance mode for the virtual keyboard. 372 373| Name | Description | 374| ------ | ---------- | 375| OFFSET | Avoid the virtual keyboard through offset.| 376| RESIZE | Avoid the virtual keyboard through resizing.| 377 378## TouchPoint<sup>11+</sup> 379 380The **TouchPoint** type is used to define the coordinates of the touch point. 381 382| Name | Type| Description | 383| ------ | ----------------------| ---------- | 384| X | [Dimension](#dimension10) | X coordinate of the touch point.| 385| Y | [Dimension](#dimension10) | Y coordinate of the touch point.| 386 387## TabContentAnimatedTransition<sup>11+</sup> 388 389The **TabContentAnimatedTransition** type is used to define the custom tab switching animation. 390 391| Name | Type | Mandatory | Description | 392| ------------- | ---------------------- | ------------------|---------------------- | 393| timeout | number | No| Timeout for the custom tab switching animation. If the set timeout period expires before the **finishTransition** API of [TabContentTransitionProxy](#tabcontenttransitionproxy11) is called, the **\<Tabs>** component considers that the custom animation has ended and performs subsequent operations. Unit:ms<br>Default value: **1000**| 394| transition | (proxy: [TabContentTransitionProxy](#tabcontenttransitionproxy11)) => void | Yes| Content of the custom tab switching animation.| 395 396## TabContentTransitionProxy<sup>11+</sup> 397 398Proxy object returned during the execution of the custom tab switching animation. You can use this object to obtain the start and target pages for the custom tab switching animation. In addition, you can call the **finishTransition** API of this object to notify the **\<Tabs>**component of the ending of the custom animation. 399 400| Name | Type | Mandatory | Description | 401| ------------- | ---------------------- | ----------------------|------------------ | 402| from | number | Yes| Index of the currently displayed tab before the animation starts.| 403| to | number | Yes| Index of the target tab to switch to.| 404| finishTransition() | void | Yes| Called to notify the **\<Tabs>** component that the custom animation ends.| 405