1# piece
2
3>  **NOTE**
4>
5>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<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.
8
9## Child Components
10
11Not supported
12
13
14## Attributes
15
16In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
17
18| Name    | Type   | Mandatory| Description                                                        |
19| -------- | ------- | ---- | ------------------------------------------------------------ |
20| content  | string  | Yes  | Text content of the operational piece.                                            |
21| 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**|
22| icon     | string  | No  | URL of the delete icon for the operational piece. The value can be a local path.                         |
23
24
25## Styles
26
27The [universal styles](js-components-common-styles.md) are supported.
28
29>  **NOTE**
30>
31>  By default, text and images are placed in the middle of the **\<piece>** component.
32
33
34## Events
35
36In addition to the [universal events](js-components-common-events.md), the following events are supported.
37
38| Name   | Parameter  | Description                                 |
39| ----- | ---- | ----------------------------------- |
40| close | -    | Triggered when users click the delete icon of the operational piece. You can delete this component by using the **if** directive.|
41
42## Methods
43
44The [universal methods](js-components-common-methods.md) are supported.
45
46
47## Example
48
49```html
50<!-- xxx.hml-->
51<div class="container" >
52  <piece if="{{first}}" content="example"></piece>
53  <piece if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece>
54</div>
55```
56
57```css
58/* xxx.css */
59.container {
60  width: 100%;
61  height: 100%;
62  align-items: center;
63  justify-content: center;
64}
65```
66
67```js
68// xxx.js
69export default {
70  data: {
71    first: true,
72    second: true
73  },
74  closeSecond(e) {
75    this.second = false;
76  }
77}
78```
79
80![11-5](figures/11-5.gif)
81