Chat     

Quasar supplies a chat component called QChatMessage which is really a chat entry that renders the data given by the props.

Basic Usage

This show a simple chat between two parties, and a to label

<q-chat-message
label='Sunday, 19th'
/>

<q-chat-message
name="me"
avatar="statics/boy-avatar.png"
:text="['hunter2']"
stamp="4 minutes ago"
sent
/>

<q-chat-message
name="Jane"
avatar="statics/linux-avatar.png"
:text="['hey, if you type in your pw', 'it will show as stars']"
stamp="7 minutes ago"
/>

Vue Properties

Vue PropertyTypeDescription
sentBooleanRender as a sent message (so from current user)
labelStringLabel of message
nameStringName of the message creator
avatarStringURL to the avatar image of the creator (use a static resource)
textArrayArray of strings that are the message body
stampStringCreation timestamp string
text-colorStringColor of the text
bg-colorStringColor of the chat message bubble

Note that text property is an Array of Strings. This is useful when two or more messages share the same (or very close) timestamp. They will be displayed on separate bubbles, but grouped together more closely so that the name of the creator and timestamp are displayed only once for this kind of group.

Please refer to the demo source for a more complete set of examples.