<tdclass="cellrowborder"valign="top"width="58.2058205820582%"headers="mcps1.1.6.1.5 "><pid="p1975944244011"><aname="p1975944244011"></a><aname="p1975944244011"></a>Text content of the operational piece.</p>
<tdclass="cellrowborder"valign="top"width="58.2058205820582%"headers="mcps1.1.6.1.5 "><pid="p19402201416398"><aname="p19402201416398"></a><aname="p19402201416398"></a>Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.</p>
<tdclass="cellrowborder"valign="top"width="58.2058205820582%"headers="mcps1.1.6.1.5 "><pid="p230211914342"><aname="p230211914342"></a><aname="p230211914342"></a>URL of the delete icon for the operational piece. The value can be a local path.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section17756476592"></a>
Styles in [Universal Styles](js-components-common-styles.md) are supported.
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1891114933015"><aname="p1891114933015"></a><aname="p1891114933015"></a>Triggered when users click the delete icon of the operational piece. You can delete this component by using the <strongid="b1276472010487"><aname="b1276472010487"></a><aname="b1276472010487"></a>if</strong> directive.</p>
</td>
</tr>
</tbody>
</table>
## Method<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section118886119320"></a>
```
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<piece>** component provides an entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients.
## Child Components
Not supported
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| content | string | Yes | Text content of the operational piece. |
| closable | boolean | No | Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.<br>Default value: **false**|
| icon | string | No | URL of the delete icon for the operational piece. The value can be a local path. |
## Styles
The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
> **NOTE**
>
> By default, text and images are placed in the middle of the **\<piece>** component.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p173811138611"><aname="p173811138611"></a><aname="p173811138611"></a>Maximum number of rating stars.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p27381813364"><aname="p27381813364"></a><aname="p27381813364"></a>Step to increment the rating value.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p87391131166"><aname="p87391131166"></a><aname="p87391131166"></a>Whether to make the rating icons as an indicator (not-editable by users).</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section5775351116"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p79091050184910"><aname="p79091050184910"></a><aname="p79091050184910"></a>Background image when a rating star is unselected. Only PNG and JPG images in a local path are supported.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1091015502499"><aname="p1091015502499"></a><aname="p1091015502499"></a>Foreground image when a rating star is selected. Only PNG and JPG images in a local path are supported.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p391095015494"><aname="p391095015494"></a><aname="p391095015494"></a>Secondary background image when a rating star is partially selected. This image will cover the background image and can only be a PNG or JPG image from a local path.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1591035014911"><aname="p1591035014911"></a><aname="p1591035014911"></a>Image width. The default value is the width of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1491065074910"><aname="p1491065074910"></a><aname="p1491065074910"></a>Image height. The default value is the height of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p391011508492"><aname="p391011508492"></a><aname="p391011508492"></a>Whether the image source is automatically flipped in the RTL text direction.</p>
>You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the rating star is gray, indicating that the image is set incorrectly.
## Events<a name="section124498406719"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="29.552955295529554%"headers="mcps1.1.4.1.2 "><pid="p255820281687"><aname="p255820281687"></a><aname="p255820281687"></a>{ rating: number }</p>
</td>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p10558228886"><aname="p10558228886"></a><aname="p10558228886"></a>Triggered when the rating value changes.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section1715414253487"></a>
```
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| star-background | string | - | No| Background image when a rating star is unselected. Only PNG and JPG images in a local path are supported.|
| star-foreground | string | - | No| Foreground image when a rating star is selected. Only PNG and JPG images in a local path are supported.|
| star-secondary | string | - | No| Secondary background image when a rating star is partially selected. This image will cover the background image and can only be a PNG or JPG image from a local path.|
| width | <length>\|<percentage> | 120px<br>60 px (cannot be edited)| No| Image width. The default value is the width of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.|
| height | <length>\|<percentage> | 24px<br>12px (cannot be edited)| No| Image height. The default value is the height of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.|
| rtl-flip | boolean | true | No| Whether the image source is automatically flipped in the RTL text direction.|
> **NOTE**
>
> You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the rating star is gray, indicating that the image is set incorrectly.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| change | { rating: number } | Triggered when the rating value changes.|
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1269067752"><aname="p1269067752"></a><aname="p1269067752"></a>Triggered when the loading starts.</p>
> - When a page containing **\<richtext>** is returned, the page's transition effect does not apply to the area where the rich text is displayed.
</td>
>
</tr>
> - Make sure the rich text does not go beyond the height of the screen. Otherwise, the excess content will not be displayed.
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p13878335145119"><aname="p13878335145119"></a><aname="p13878335145119"></a>Triggered when the loading is complete.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="a745abab21c7c47afbb4343f611f13f0e"><aname="a745abab21c7c47afbb4343f611f13f0e"></a><aname="a745abab21c7c47afbb4343f611f13f0e"></a>Font color of the modified text.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="a86d755d025194433a3d824ac6308dc19"><aname="a86d755d025194433a3d824ac6308dc19"></a><aname="a86d755d025194433a3d824ac6308dc19"></a>Font size of the modified text.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="p1023513229570"><aname="p1023513229570"></a><aname="p1023513229570"></a>Whether the font size of the modified text changes with the system's font size settings.</p>
<divclass="note"id="note5531128463"><aname="note5531128463"></a><aname="note5531128463"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p11531172814611"><aname="p11531172814611"></a><aname="p11531172814611"></a>If the <strongid="b9631151853613"><aname="b9631151853613"></a><aname="b9631151853613"></a>config-changes</strong> tag of <strongid="b15641171817360"><aname="b15641171817360"></a><aname="b15641171817360"></a>fontSize</strong> is configured for abilities in the <strongid="b20644418103618"><aname="b20644418103618"></a><aname="b20644418103618"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="a04816275b7d249079b4a1e80f69ea86e"><aname="a04816275b7d249079b4a1e80f69ea86e"></a><aname="a04816275b7d249079b4a1e80f69ea86e"></a>Font style of the modified text. For details, see <ahref="js-components-basic-text.md#section5775351116">font-style</a> of the <strongid="b18795152647"><aname="b18795152647"></a><aname="b18795152647"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="aa1d0d3abf811468e8c3f707e1a7e5b8c"><aname="aa1d0d3abf811468e8c3f707e1a7e5b8c"></a><aname="aa1d0d3abf811468e8c3f707e1a7e5b8c"></a>Font weight of the modified text. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b1695595210517"><aname="b1695595210517"></a><aname="b1695595210517"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="aa83ac8481649423b80b326de4eb5fefb"><aname="aa83ac8481649423b80b326de4eb5fefb"></a><aname="aa83ac8481649423b80b326de4eb5fefb"></a>Text decoration of the modified text. For details, see <ahref="js-components-basic-text.md#section5775351116">text-decoration</a> of the <strongid="b1528363213719"><aname="b1528363213719"></a><aname="b1528363213719"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="a52f159b549364d40b7c92d51aba7c1a9"><aname="a52f159b549364d40b7c92d51aba7c1a9"></a><aname="a52f159b549364d40b7c92d51aba7c1a9"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> is used for the text.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section1319514265813"></a>
Only the click event in [Universal Events](js-components-common-events.md) is supported.
## Method<a name="section2291124515582"></a>
Not supported
Not supported
## Example Code<a name="section1841815550582"></a>
```
## Attributes
The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
> **NOTE**
>
> The **focusable** and **disabled** attributes are not supported.
## Styles
Only the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | - | No | Font color of the modified text. |
| font-size | <length> | 30px | No | Font size of the modified text. |
| allow-scale | boolean | true | No | Whether the font size of the modified text changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-style | string | normal | No | Font style of the modified text. For details, see **font-style** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-weight | number \| string | normal | No | Font weight of the modified text. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| text-decoration | string | none | No | Text decoration of the modified text. For details, see **text-decoration** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
## Events
Only the click event in [Universal Events](../arkui-js/js-components-common-events.md) is supported.
