Properties
| Name | Type | Description |
|---|---|---|
| text | string | Initial text of the input element |
| placeholderText | string | Text that appears in the input element when it has no value set |
| disabled | boolean | When set to true, user won’t be able to interact with the input element |
| auxiliaryButtonAlignment | auxiliaryButtonAlignmentEnum | Group of constants representing the in-built alignment pattern |
| messageInputStyle | MessageInputStyle | Styling properties and values of the element |
Slots
User-defined view| Name | Description |
|---|---|
| primaryView | Placeholder for the main or primary view that the user is intended to engage with. For e.g. send button |
| secondaryView | Placeholder for the secondary or less prominent view compared to primary view that the user is intended to engage with. For e.g. attachment button |
| auxilaryView | Placeholder for the secondary or additional view that provides supplementary information that the user is intended to engage with. |
auxiliaryButtonAlignmentEnum
Alignment constants| Name | Description |
|---|---|
| left | Aligns the auxiliary view to the left i.e. besides the secondary view |
| right | Aligns the auxiliary view to the right i.e. before the primary view |
MessageInputStyle
Styling properties and values of the element| Name | Description |
|---|---|
| width | Sets the width of the element |
| height | Sets the height of the element |
| border | Sets the border of the element |
| borderRadius | Sets the border radius of the element |
| background | Sets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link |
| placeholderTextFont | Sets all the different properties of font for the hint text. Reference link |
| placeholderTextColor | Sets the foreground color of hint text. |
| textFont | Sets all the different properties of font for the user input text. Reference link |
| textColor | Sets the foreground color of user input text. |
| dividerColor | Sets the tint or color applied to the separator. |
| inputBorder | Sets the border of the text input within the element |
| inputBorderRadius | Sets the border radius of the text input within the element |
| inputBackground | Sets all background style properties at once, such as color, image, origin and size, or repeat method of the text input within the element. Reference link |
| maxHeight | Sets the maximum height of the element before it can trigger the scrolling or overflow behavior. |
Events
| Name | Description |
|---|---|
| cc-message-input-changed | Event triggered when the content of the element is modified or changed by the user. |
Usage
- JavaScript
import "@cometchat/uikit-elements"; //import the web elements package.
const changeHandler = event => {
console.log(event.detail.value)
}
<cometchat-message-input
:placeholderText="Enter your message here"
@cc-message-input-changed="changeHandler($event)">
<div slot="secondaryView">
<button>Send message<button>
</div>
</cometchat-message-input>