| 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 | string \| number | Angle unit. If the input is a number, use **deg**. If the input is a string, explicitly specify the unit, which can be either of the following: <br/>- **deg**, as in **'100deg'**<br/>- **rad**, as in **'3.14rad'** |
<tdclass="cellrowborder"valign="top"width="60.34%"headers="mcps1.1.4.1.3 "><pid="p745mcpsimp"><aname="p745mcpsimp"></a><aname="p745mcpsimp"></a>Length unit. If the input is a number, use <strongid="b1995533113315"><aname="b1995533113315"></a><aname="b1995533113315"></a>vp</strong>. If the input is a string, explicitly specify the unit, for example, <strongid="b7956133143315"><aname="b7956133143315"></a><aname="b7956133143315"></a>10px</strong>, or specify the length in percentage, for example, <strongid="b1195613123314"><aname="b1195613123314"></a><aname="b1195613123314"></a>100%</strong>.</p>
</td>
| Name| Type| Description|
</tr>
| -------- | -------- | -------- |
</tbody>
| Point | [Length, Length] | Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.|
</table>
## Angle Type<a name="section1530915545289"></a>
## Color Type
<aname="table6309125452810"></a>
The **Color** used by the component attribute method is described as follows:
| 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. <br/>- 'rgb(255, 255, 255)' <br/>- 'rgba(255, 255, 255, 1.0)' <br/>- Hex format: 0xrrggbb, 0xaarrggbb, '\#FFFFFF' <br/>- Enum: Color.Black, Color.White|
| Black | 0x000000 |  |
<tdclass="cellrowborder"valign="top"width="67.40674067406741%"headers="mcps1.1.4.1.3 "><pid="p10844175013312"><aname="p10844175013312"></a><aname="p10844175013312"></a>Angle unit. If the input is a number, use <strongid="b171831045227"><aname="b171831045227"></a><aname="b171831045227"></a>deg</strong>. If the input is a string, use either of the following angle units:</p>
| Blue | 0x0000ff |  |
<aname="ul1663455543315"></a><aname="ul1663455543315"></a><ulid="ul1663455543315"><li><strongid="b134871561436"><aname="b134871561436"></a><aname="b134871561436"></a>deg</strong>, for example, <strongid="b134888560317"><aname="b134888560317"></a><aname="b134888560317"></a>100deg</strong>.</li><li><strongid="b1912412212420"><aname="b1912412212420"></a><aname="b1912412212420"></a>rad</strong>, for example, <strongid="b111251221244"><aname="b111251221244"></a><aname="b111251221244"></a>3.14rad</strong>.</li></ul>
| Brown | 0xa52a2a |  |
| 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.|
<tdclass="cellrowborder"valign="top"width="67.40674067406741%"headers="mcps1.1.4.1.3 "><pid="p12798132712281"><aname="p12798132712281"></a><aname="p12798132712281"></a>Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.</p>
Resource reference type, which is used to set the value of a component attribute.
</td>
</tr>
You can use **$r** or **$rawfile** to create a **Resource** object. For details, see [Resource Access](ts-media-resource-type.md).
</tbody>
</table>
- $r('belonging.type.name')
**belonging**: system or application resource. The value can be **'sys'** or **'app'**.
## Color Type<a name="section1326744510818"></a>
**type**: resource type, which can be **'color'**, **'float'**, **'string'**, or **'media'**.
The **Color** used by the component attribute method is described as follows:
**name**: resource name, which is determined during resource definition.
| Resource | {<br/>readonly id: [number];<br/>readonly type: [number];<br/>readonly params?: any[];<br/>} | **id**: resource ID. <br/>**type**: resource type (enumerated value). <br/>**params**: optional parameters. <br/>After a **Resource** object is created using **$r** or **$rawfile**, modifying attribute values of the object is prohibited.|
<tdclass="cellrowborder"valign="top"width="26.35%"headers="mcps1.1.4.1.2 "><pid="p10267245383"><aname="p10267245383"></a><aname="p10267245383"></a>string | number | Color</p>
| Name| Type| Description|
</td>
| -------- | -------- | -------- |
<tdclass="cellrowborder"valign="top"width="60.34%"headers="mcps1.1.4.1.3 "><pid="p11674615417"><aname="p11674615417"></a><aname="p11674615417"></a>Color information. If the input is a string, use <strongid="b196195148488"><aname="b196195148488"></a><aname="b196195148488"></a>rgb</strong> or <strongid="b7743118134810"><aname="b7743118134810"></a><aname="b7743118134810"></a>rgba</strong> to describe the color. If the input is a number, describe the color in HEX format. If the input is of a color type, use a color value.</p>
| 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](ts-component-based-builder.md).|
<tdclass="cellrowborder"valign="top"width="66.92669266926693%"headers="mcps1.1.4.1.3 "><pid="p1127933675115"><aname="p1127933675115"></a><aname="p1127933675115"></a>Type of the progressive color stop. The first parameter specifies the color value, and the second parameter specifies the ratio of 0 to 1.</p>
