<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>
# piece
```
> **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>
<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>
>A maximum of five **<toolbar-item\>** components can be contained in a **<toolbar\>** component. If there are six or more, only the first four are displayed, and the rest items are hidden in the **More** list of the toolbar. Users can click **More** to view the hidden items.
>The list is displayed in the default style instead of a customized style set for the **<toolbar-item\>** component.
Only the **\<toolbar-item>** component is supported.
## Attributes<a name="section153601034618"></a>
> **NOTE**
>
> A maximum of five **\<toolbar-item>** child components can be displayed in a **\<toolbar>** component. If there are six or more toolbar items, the first four are displayed, and the rest items are added to the **More** list of the toolbar. Users can click **More** to view the items. The list is displayed in the default style instead of the custom style set for the <toolbar-item> components.
Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
## Styles<a name="section1889052254711"></a>
## Attributes
Styles in [Universal Styles](js-components-common-styles.md) are supported.
The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
>**ImageBitmap** is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **ImageBitmap** object is generated by the **transferToImageBitmap\(\)** method of the **OffscreenCanvas** and stores the pixel data rendered on the **OffscreenCanvas**.
## Attributes<a name="section661391987"></a>
The **ImageBitmap** object is an object generated using the **transferToImageBitmap()** method of the **OffscreenCanvas** and stores the pixel data rendered on the **OffscreenCanvas**.
<tdclass="cellrowborder"valign="top"width="47.774777477747776%"headers="mcps1.1.4.1.3 "><pid="p1785711281405"><aname="p1785711281405"></a><aname="p1785711281405"></a>Pixel width of the <strongid="b1722548101315"><aname="b1722548101315"></a><aname="b1722548101315"></a>ImageBitmap</strong> object.</p>
<tdclass="cellrowborder"valign="top"width="47.774777477747776%"headers="mcps1.1.4.1.3 "><pid="p3857192844012"><aname="p3857192844012"></a><aname="p3857192844012"></a>Pixel height of the <strongid="b199991910181313"><aname="b199991910181313"></a><aname="b199991910181313"></a>ImageBitmap</strong> object.</p>
</td>
</tr>
</tbody>
</table>
## Attributes
| Name| Type| Description|
| -------- | -------- | -------- |
| width | number | Pixel width of the **ImageBitmap** object.|
| height | number | Pixel height of the **ImageBitmap** object.|
