<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>
<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>
<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>
<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>
</td>
</tr>
</tbody>
</table>
## Color Type<a name="section1326744510818"></a>
The **Color** used by the component attribute method is described as follows:
<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>
</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>
<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>
</td>
</tr>
</tbody>
</table>
## Example<a name="section83351227165714"></a>
# 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, explicitly specify the unit, which can be either of the following: <br/>- **deg**, as in **'100deg'**<br/>- **rad**, as in **'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** used by the component attribute method 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. <br/>- 'rgb(255, 255, 255)' <br/>- 'rgba(255, 255, 255, 1.0)' <br/>- Hex format: 0xrrggbb, 0xaarrggbb, '\#FFFFFF' <br/>- Enum: Color.Black, Color.White|
The supported **Color** enums are described as follows:
| Color| Value| Illustration|
| -------- | -------- | -------- |
| Black | 0x000000 |  |
| Blue | 0x0000ff |  |
| Brown | 0xa52a2a |  |
**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
Resource reference type, which is used to set the value of a component attribute.
You can use **$r** or **$rawfile** to create a **Resource** object. For details, see [Resource Access](ts-media-resource-type.md).
- $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 | {<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.|
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](ts-component-based-builder.md).|
