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, the following attributes are supported.

Name	Type	Mandatory	Description
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. 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 are supported.

NOTE

By default, text and images are placed in the middle of the <piece> component.

Events

In addition to the universal events, the following events are supported.

Name	Parameter	Description
close	-	Triggered when users click the delete icon of the operational piece. You can delete this component by using the if directive.

Methods

The universal methods are supported.

Example

<!-- xxx.hml-->
<div class="container" >
  <piece if="{{first}}" content="example"></piece>
  <piece if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece>
</div>

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

// xxx.js
export default {
  data: {
    first: true,
    second: true
  },
  closeSecond(e) {
    this.second = false;
  }
}

11-5