Types
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 'color', 'float', '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. |
| string | Color in RGB or RGBA notation. |
| Resource | Color referenced from system or application resources. |
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. |
| weight | 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. |
| 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, sans-serif'. Currently, only the 'sans-serif' font is supported. |
| style | FontStyle | No | Font style. |
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 | Must be decorated by @Builder. For details, see @Builder. |