Message Input
CometChatMessageInput
is a component that provides a skeleton layout for contents of like TextField
, auxiliary options, primary button view and attachment options.
This element enable users to enter free-form text data along with custom view of 3 variants (primary, secondary and auxiliary).
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>