Types
Resource
The Resource type is used to reference resources for setting component attribute values.
If a Resource object is created using $r or $rawfile, modifying attribute values of the object is prohibited.
-
$r('belonging.type.name')belonging: system or application resource. The value 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 resources/rawfile of the project.
Length
The Length type is used to represent a size unit.
| Type | Description |
|---|---|
| string | String type. Explicitly specify the length unit, for example, '10px', or the length in percentage, for example, '100%'. |
| number | Number type. The default unit is vp. |
| Resource | Size referenced from system or application resources. |
ResourceStr8+
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 padding areas in different directions of a component.
| Name | Type | Mandatory | Description |
|---|---|---|---|
| top | Length | No | Height of the padding area on the top of the component. |
| right | Length | No | Width of the padding area on the right of the component. |
| bottom | Length | No | Height of the padding area at the bottom of the component. |
| left | Length | No | Width of the padding area on the left of the component. |
Margin
The Margin type is used to describe the margin areas in different directions of a component.
| Name | Type | Mandatory | Description |
|---|---|---|---|
| top | Length | No | Height of the margin area above the component. |
| right | Length | No | Width of the margin area on the right of the component. |
| bottom | Length | No | Height of the margin area below the component. |
| left | Length | No | Width of the margin area on the left 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 | Horizontal offset. |
| dy | Length | Yes | Vertical offset. |
ResourceColor8+
The ResourceColor type is used to describe the color types of resources.
| Type | Description |
|---|---|
| Color | Color enum. |
| number | Color in the hexadecimal notation. |
| string | Color in the RGB or RGBA notion. |
| Resource | Color referenced from system or application resources. |
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. |
| 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'. |
| style | FontStyle | No | Font style. |
Area8+
The Area type is used to describe the area information of the target element.
| Name | Type | Mandatory | Description |
|---|---|---|---|
| width | Length | Yes | Width of the target element. The value is of the number type when being used as the return value and the unit is vp. |
| height | Length | Yes | Height of the target element. The value is of the number type when being used as the return value and the unit is vp. |
| position | Position | Yes | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPosition | Position | Yes | Position of the upper left corner of the target element relative to that of the page. |
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 when being used as the return value and the unit is vp. |
| y | Length | No | Y coordinate. The value is of the number type when being used as the return value and the unit is vp. |
ConstraintSizeOptions
The ConstraintSizeOptions type is used to set the constraint size of a component, thereby limiting the size range during component layout.
| Name | Type | Mandatory | Description |
|---|---|---|---|
| minWidth | Length | No | Minimum width of the element. |
| maxWidth | Length | No | Maximum width of the element. |
| minHeight | Length | No | Minimum height of the element. |
| maxHeight | Length | No | Maximum height of the element. |
SizeOptions
The SizeOptions type is used to set the width and height.
| Name | Type | Mandatory | Description |
|---|---|---|---|
| width | Length | No | Width of the element. |
| height | Length | No | Height of the element. |
BorderOptions
The BorderOptions type is used to provide border information.
| Name | Type | Mandatory | Description |
|---|---|---|---|
| width | Length | No | Border width. |
| color | ResourceColor | No | Border color. |
| radius | Length | No | Radius of the rounded corner border. |
| style | BorderStyle | No | Border style. |
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. |