Types

NOTE

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.

Resource

The Resource type is used to reference resources for setting component attributes.

You can use $r or $rawfile to create a Resource object, but its attribute values cannot be changed.

  • $r('belonging.type.name')

    belonging: group to which the resource belongs, which can be 'sys' or 'app'.

    type: resource type, which can be 'boolean', 'color', 'float', 'intarray', 'integer', 'pattern', 'plural', 'strarray', 'string', or 'media'.

    name: resource name, which is determined during resource definition.

  • $rawfile('filename')

    filename: name of the file in the resources/rawfile directory of the project.

    NOTE

    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.

Length

The Length type is used to represent a size unit.

Type Description
string String type. Specify the length unit explicitly, for example, '10px', or provide the length in percentage, for example, '100%'.
number Number type. The default unit is vp.
Resource Size referenced from system or application resources.

ResourceStr

The ResourceStr type is used to represent the types that can be used by input parameters of the string type.

Type Description
string String type.
Resource String referenced from system or application resources.

Padding

The Padding type is used to describe the paddings in different directions of a component.

Name Type Mandatory Description
top Length No Height of the padding on the top of the component.
right Length No Width of the padding on the right of the component.
bottom Length No Height of the padding at the bottom of the component.
left Length No Width of the padding on the left of the component.

Margin

The Margin type is used to describe the margins in different directions of a component.

Name Type Mandatory Description
top Length No Height of the margin above the component.
right Length No Width of the margin on the right of the component.
bottom Length No Height of the margin below the component.
left Length No Width of the margin on the left of the component.

EdgeWidths9+

The EdgeWidths type is used to describe the edge widths in different directions of a component.

Name Type Mandatory Description
top Length No Width of the top edge of the component.
right Length No Width of the right edge of the component.
bottom Length No Width of the bottom edge of the component.
left Length No Width of the left edge of the component.

BorderRadiuses9+

The BorderRadiuses type is used to describe the radius of the rounded corners of a component.

Name Type Mandatory Description
topLeft Length No Radius of the top left rounded corner of the component.
topRight Length No Radius of the top right rounded corner of the component.
bottomLeft Length No Radius of the bottom left rounded corner of the component.
bottomRight Length No Radius of the bottom right rounded corner of the component.

EdgeColors9+

The EdgeColors type is used to describe the edge colors of a component.

Name Type Mandatory Description
top ResourceColor No Color of the top edge of the component.
right ResourceColor No Color of the right edge of the component.
bottom ResourceColor No Color of the bottom edge of the component.
left ResourceColor No Color of the left edge of the component.

EdgeStyles9+

The EdgeStyles type is used to describe the edge styles of a component.

Name Type Mandatory Description
top BorderStyle No Style of the top edge of the component.
right BorderStyle No Style of the right edge of the component.
bottom BorderStyle No Style of the bottom edge of the component.
left BorderStyle No Style of the left edge of the component.

Offset

The Offset type is used to describe the offset coordinates of a component in the layout.

Name Type Mandatory Description
dx Length Yes X coordinate of the offset.
dy Length Yes Y coordinate of the offset.

ResourceColor

The ResourceColor type is used to describe the color types of resources.

Type Description
Color Color enums.
number Color in hexadecimal notation. RGB is supported. Example: 0xffffff
string Color in RGB or ARGB notation. Example: '#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'
Resource Color referenced from system or application resources.

ColoringStrategy10+

The ColoringStrategy type is used to describe the foreground colors.

Name Description
INVERT Inverse of the component background color.

LengthConstrain

The LengthConstrain type is used to describe the maximum and minimum lengths of a component.

Name Type Mandatory Description
minLength Length Yes Minimum length of the component.
maxLength Length Yes Maximum length of the component.

Font

The Font type is used to set the text style.

Name Type Mandatory Description
size Length No Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.
Default value: 16.0
weight 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.
Default value: 400 | FontWeight.Normal
family string | 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 are supported.
style FontStyle No Font style.
Default value: FontStyle.Normal

Area8+

The Area type is used to describe the area information of a component.

Name Type Description
width Length Width of the component. The value is of the number type in vp when used as the return value.
height Length Height of the component. The value is of the number type in vp when used as the return value.
position Position Position of the upper left corner of the component relative to that of its parent container.
globalPosition Position Position of the upper left corner of the component relative to that of the page where the component resides.

Position8+

The Position type is used to represent coordinates of a point.

Name Type Mandatory Description
x Length No X coordinate. The value is of the number type in vp when used as the return value.
y Length No Y coordinate. The value is of the number type in vp when used as the return value.

ConstraintSizeOptions

The ConstraintSizeOptions type is used to set the size constraints of a component during component layout.

Name Type Mandatory Description
minWidth Length No Minimum width of the component.
maxWidth Length No Maximum width of the component.
minHeight Length No Minimum height of the component.
maxHeight Length No Maximum height of the component.

SizeOptions

The SizeOptions type is used to set the width and height.

Name Type Mandatory Description
width Length No Width of the component.
height Length No Height of the component.

BorderOptions

The BorderOptions type is used to provide border information.

Name Type Mandatory Description
width Length | EdgeWidths9+ No Border width.
color ResourceColor | EdgeColors9+ No Border color.
radius Length | BorderRadiuses9+ No Radius of the rounded corner border.
style BorderStyle | EdgeStyles9+ No Border style.

ColorFilter9+

The ColorFilter type is used to create a color filter with a 4 x 5 matrix.

Name Type Mandatory Description
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.

CustomBuilder8+

The CustomBuilder type is used to define custom UI descriptions in component attribute methods.

Name Type Description
CustomBuilder () => any Builder for creating a custom component; must be used with @Builder. For details, see @Builder.

PixelStretchEffectOptions10+

The PixelStretchEffectOptions type is used to describe the pixel stretch effect options.

Name Type Mandatory Description
left Length No Length by which a pixel is stretched towards the left edge of the image.
right Length No Length by which a pixel is stretched towards the right edge of the image.
top Length No Length by which a pixel is stretched towards the top edge of the image.
bottom Length No Length by which a pixel is stretched towards the bottom edge of the image.

ModalTransition10+

The ModalTransition type is used to set the transition type for a full-screen modal.

Name Description
NONE No transition animation for the modal.
DEFAULT Slide-up and slide-down animation for the modal.
ALPHA Opacity gradient animation for the modal.

Dimension10+

The Length type is used to represent a size unit.

Type Description
PX Physical pixel unit type. The unit px must be included, for example, '10px'.
VP Pixel unit type specific to the screen density. The unit vp can be included or omitted, for example, 10 or '10vp'.
FP Font pixel unit type. The unit fp must be included, for example, '10fp'.
LPX Logical pixel unit type. The unit lpx must be included, for example, '10lpx'.
Percentage Percentage type. The unit % must be included, for example, '10%'.
Resource Size referenced from system or application resources.

PX10+

The PX type is used to represent a length in px.

Type Description
{number}px Physical pixel unit type. The unit px must be included, for example, '10px'.

VP10+

The VP type is used to represent a length in vp.

Type Description
{number}vp|number Pixel unit type specific to the screen density. The unit vp can be included or omitted, for example, 10 or '10vp'.

FP10+

The FP type is used to represent a length in fp.

Type Description
{number}fp Font pixel unit type. The unit fp must be included, for example, '10fp'.

LPX10+

The LPX type is used to represent a length in lpx.

Type Description
{number}lpx Logical pixel unit type. The unit lpx must be included, for example, '10lpx'.

Percentage10+

The Percentage type is used to represent a length in percentage.

Type Description
{number}% Percentage type. The unit % must be included, for example, '10%'.

Degree10+

The Degree type is used to represent a length in deg.

Type Description
{number}deg Degree type. The unit deg must be included, for example, '10deg'.

SwiperAnimationEvent10+

Describes the animation information of the <Swiper> component.

Name Type Description
currentOffset number Offset of the currently displayed element relative to the start position of the <Swiper> along the main axis. Unit: vp
Default value: 0
targetOffset number Offset of the target element relative to the start position of the <Swiper> along the main axis. Unit: vp
Default value: 0
velocity number Hands-off velocity at the beginning of the animation. Unit: vp/s
Default value: 0

SafeAreaType10+

The SafeAreaType type is used to describe the types of expanded safe areas.

Name Description
SYSTEM Default non-safe area of the system, including the status bar and navigation bar.
CUTOUT Non-safe area of the device, for example, the notch area.
KEYBOARD Soft keyboard area.

SafeAreaEdge10+

The SafeAreaEdge type is used to define the edge for expanding the safe area.

Name Description
TOP Top edge.
BOTTOM Bottom edge.
START Start edge.
END End edge.