Messages Component

Messages Vue component represents Messages component.

Usage examples

<f7-messages>
  <f7-message name="John" text="Hello, Kate!" type="received"></f7-message>
  <f7-message name="Kate" text="Hi, John!" type="sent"></f7-message>
</f7-messages>

Renders to:

<div class="messages">
  <div class="message message-received">
    <div class="message-name">John</div>
    <div class="message-text">Hello, Kate!</div>
  </div>
  <div class="message message-sent">
    <div class="message-name">Kate</div>
    <div class="message-text">Hi, John!</div>
  </div>
</div>

With Messagebar

Here is how it can be used in Vue component along with Message Bar:

<template>
  <f7-messages>
    <f7-message v-for="message in messages"
      :text="message.text"
      :label="message.label"
      :date="message.date"
      :name="message.name"
      :avatar="message.avatar"
      :type="message.type"
      :day="message.day"
      :time="message.time"
      @click="onClick"
      @click:text="onTextClick"
      @click:name="onNameClick"
      @click:avatar="onAvatarClick"
    ></f7-message>
  </f7-messages>
  <f7-messagebar placeholder="Message" send-link="Send" @submit="onSubmit"></f7-messagebar>
</template>
<script>
  export default {
    data: function () {
      return {
        name: 'Vladimir',
        avatar: 'path/to/avatar-1.jpg',
        messages: [
          {
            day: 'Wendesday',
            time: '13:34'
          },
          {
            name: 'Vladimir',
            text: 'How are you?',
            label: 'Sent in good mood :)',
            avatar: 'path/to/avatar-1.jpg',
            date: 'Yesterday 13:34'
          },
          {
            name: 'Jane',
            text: 'I\'m good, thank you!',
            type: 'received',
            avatar: 'path/to/avatar-2.jpg',
            date: 'Yesterday at 13:50'
          }
        ]
      }
    },
    methods: {
      onClick: function (event) {
        console.log('message click');
      },
      onAvatarClick: function () {
        console.log('avatar-click');
      },
      onTextClick: function () {
        console.log('text-click');
      },
      onNameClick: function () {
        console.log('name-click');
      },
      onSubmit: function (text, clear) {
        if (text.trim().length === 0) return;
        this.messages.push({
          name: this.name,
          avatar: this.avatar,
          text: text,
          date: (function () {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            return hours + ':' + minutes;
          })()
        });
        // Clear Message Bar
        clear();
      }
    }
  }
</script>

Properties

Prop	Type	Default	Description
<f7-messages> properties
init	boolean	true	Initializes Messages component
autoLayout	boolean	true	Enable Auto Layout to add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically
newMessagesFirst	boolean	false	Enable if you want to use new messages on top, instead of having them on bottom
scrollMessages	boolean	true	Enable/disable messages autoscrolling when adding new message
scrollMessagesOnlyOnEdge	boolean	false	If enabled then messages autoscrolling will happen only when user is on top/bottom of the messages view
messages	array		Array with initial messages. Each message in array should be presented as object with message parameters
<f7-message> properties
type	string	"sent"	Message type: "sent" (default) or "received"
text	string		Single message text
avatar	string		Single message user's avatar URL
name	string		Single message user's name
label	string		Single message label
date	string		Single message date
day	string		Conversation day
time	string		Conversation time
first	boolean	true	Defines that the message is first in the conversation
last	boolean	true	Defines that the message is last in the conversation

Methods

.addMessage(messageParameters, method, animate);	Add new message to the end or to the beginning depending on method parameter messageParameters - object parameters of message to add. Required. method - string - ('append' or 'prepend') dictates to add new message in the end or in the beginning of messages container. Optional, if not specified, then it will add message depending on newMessagesFirst parameter animate - boolean - (by default true) You may pass here false and message will be added immediately without any transiton and scrolling animation. Optional. Method returns HTMLElement of added messsage
.appendMessage(messageParameters, animate);	Add new message to the end (to the bottom)
.prependMessage(messageParameters, animate);	Add new message to the beginning (to the top)
.addMessages(messages, method, animate);	Add multiple messages per once. messages - array with messages to add. Each message in array should be presented as object with message parameters Required. Method returns array of HTMLElements with added messsages
.removeMessage(message);	Remove message message - HTMLElement or string (with CSS Selector) of message element to remove. Required Method returns true if specified message was removed
.removeMessages(messages);	Remove multiple messages messages - array (with HTMLElements) or string (with CSS Selector) of messages to remove. Required Method returns true if specified messages was removed
.scroll();	Scroll messages to top/bottom depending on newMessagesFirst parameter
.layout();	Apply messages auto layout
.clean();	Clean/remove all the messages

Events

Event	Description
<f7-message> events
click	Event will be triggered when user clicks on message bubble
click:name	Event will be triggered when user clicks on message user's name
click:text	Event will be triggered when user clicks on message text
click:avatar	Event will be triggered when user clicks on message user's avatar

Access To Initialized Instance

If you use automatic initalization to init Messages (with init:true prop) and need to use its Methods and Properties you can access its initialized instance by accessing .f7Messages component's property.