Types

Length Type

Name Type Description
Length string | number Length unit. If the input is a number, use vp. If the input is a string, explicitly specify the unit, for example, '10px', or specify the length in percentage, for example, '100%'.

Angle Type

Name Type Description
Angle string | number Angle unit. If the input is a number, use deg. If the input is a string, use either of the following angle units:
- deg: for example, '100deg'
- rad: for example, '3.14rad'

Point Type

Name Type Description
Point [Length, Length] Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.

Color Type

The Color type used by component attribute methods is described as follows:

Name Type Description
Color string | number | Color Color information. If the input is a string, use rgb or rgba to specify the color. If the input is a number, use Hex format to specify the color. If the input is a Color enum, use a color value to specify the color.
- 'rgb(255, 255, 255)'
- 'rgba(255, 255, 255, 1.0)'
- Hex format: 0xrrggbb, 0xaarrggbb, '#FFFFFF'
- Enum: Color.Black, Color.White

The supported Color enums are described as follows:

Color Value Illustration
Black 0x000000 en-us_image_0000001219864153
Blue 0x0000ff en-us_image_0000001174104404
Brown 0xa52a2a en-us_image_0000001219744201
Gray 0x808080 en-us_image_0000001174264376
Green 0x008000 en-us_image_0000001174422914
Orange 0xffa500 en-us_image_0000001219662661
Pink 0xffc0cb en-us_image_0000001219662663
Red 0xff0000 en-us_image_0000001219662665
White 0xffffff en-us_image_0000001174582866
Yellow 0xffff00 en-us_image_0000001174582864

ColorStop Type

ColorStop is used to describe the progressive color stop.

Name Type Description
ColorStop [Color, number] Type of the progressive color stop. The first parameter specifies the color value, and the second parameter specifies the ratio of 0 to 1.

Resource Type

The Resource type is used to reference resources for setting the value of a component attribute.

You can use $r or $rawfile to create a Resource object. For details, see Resource Access.

  • $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.

Name Type Description
Resource {
readonly id: [number];
readonly type: [number];
readonly params?: any[];
}		 id: resource ID.
type: resource type (enumerated value).
params: optional parameters.
After a Resource object is created using $r or $rawfile, modifying attribute values of the object is prohibited.

ResourceStr Type8+

Name Type Description
ResourceStr string | Resource Resource string.

ResourceColor Type8+

Name Type Description
ResourceColor Color | number | string | Resource Resource color.

Font Type8+

Name Type Description
Font {
size?: Length;
weight?: FontWeight | number | string;
family?: string | Resource;
style?: FontStyle;
}		 Text style.
size: font size. For the number type, use the unit fp.
weight: 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: font family. 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: font style.

CustomBuilder Type8+

You can use CustomBuilder to define custom UI descriptions in component attribute methods.

Name Type Description
CustomBuilder () => any Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by @Builder. For details, see @Builder.

Example

@Entry
@Component
struct dataTypeExample {
  build() {
    Column({ space: 5 }) {
      Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Text('90%').width('90%').height(40).backgroundColor(0xF9CF93)
        .textAlign(TextAlign.Center).fontColor(Color.White)
      Text('320').width(320).height(40).backgroundColor(0xF9CF93)
        .textAlign(TextAlign.Center).fontColor(Color.White)
      Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93)
        .textAlign(TextAlign.Center).fontColor(Color.White)

      Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Text('45deg')
        .width(40).height(40)
        .rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' })
        .fontColor(Color.White)
        .backgroundColor(0xF9CF93).textAlign(TextAlign.Center)

      Text('45rad')
        .width(40).height(40)
        .rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' })
        .fontColor(Color.White)
        .backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 })

      Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20])

      Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%')
      Text('0xF9CF93')
        .fontColor(Color.White).textAlign(TextAlign.Center)
        .width('90%').height(40).backgroundColor(0xF9CF93)

      Text('#F9CF93')
        .fontColor(Color.White).textAlign(TextAlign.Center)
        .width('90%').height(40).backgroundColor('#F9CF93')

      Text('rgb(249, 207, 147)')
        .fontColor(Color.White).textAlign(TextAlign.Center)
        .width('90%').height(40).backgroundColor('rgb(249, 207, 147)')

      Text('rgba(249, 207, 147, 1.0)')
        .fontColor(Color.White).textAlign(TextAlign.Center)
        .width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)')

      Text('Color.Yellow')
        .textAlign(TextAlign.Center)
        .width('90%').height(40).backgroundColor(Color.Yellow)
    }
    .width('100%').margin({ top: 5 })
  }
}

en-us_image_0000001219982719