Framework7 Messages

Framework7 Messages are the components which are used for comment and messaging system in the application.

Messages layout

Messages Page Layout

Following is a list of classes of messages page layout:

  • "messages-content": It is a required additional class added to "page-content" and used for messages wrapper.
  • "messages": It is also a required additional wrapper for messages bubbles.
  • "messages-date": It uses date stamp container to display date and time of message sent or received.
  • "message": It is used to display single message.

Single Message Inner Parts

Following are the classes of simple message inner parts:

  • message-name: It is used to provide the sender name.
  • message-text: It is used to define the text with bubble type.
  • message-avatar: It is used to specify the sender avatar.
  • message-label: It is used to specify the text label below the bubble.

Additional classes for Single Message Container

A list of additional classes for single message container:

IndexClassDescription
1)message-sentIt specifies that message was sent by the user and is displayed with green background color on the right side.
2)message-receivedIt is used for displaying the single message indicating that, the message was received by user and stays on the left side with grey background color.
3)message-picIt is an additional class for displaying image with a single message.
4)message-with-avatarIt is an additional class for displaying a single message (received or sent) with avatar.
5)message-with-tailYou can add a bubble tail for single message (received or sent).

Additional Available Classes for Single Message

IndexClassDescription
1)message-hide-nameIt is an additional class for hiding message name for a single message (received or sent).
2)message-hide-avatarIt is an additional class for hiding message avatar for a single message (received or sent).
3)message-hide-labelIt is an additional class for hiding message label for a single message (received or sent).
4)message-lastYou can use this class to indicate the last received or sent message in current conversation by one sender for a single message (received or sent).
5)message-firstYou can use this class to indicate first received or first sent message in current conversation by one sender for a single message (received or sent).

Initialize Messages with JavaScript

The following method is used to initialize the messages with JavaScript:

Here:

  • messagesContainer: It is a required HTML element or string that includes messages container HTML element.
  • parameters: It specifies an object with messages parameters.

Messages Parameters

IndexParameterTypeDescription
1)autoLayoutbooleanIt adds additional required classes to each message by enabling it.
2)newMessagesFirstbooleanYou can display message on top instead of displaying on bottom by enabling it.
3)messagesarrayIt displays an array of messages in which each message should be represented as object with message parameters.
4)messageTemplatestringIt displays the single message template.

Message Methods

Following is a list of message methods:

IndexMethodDescription
1)myMessages.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
2)myMessages.appendMessage(messageParameters, animate);Add new message to the end (to the bottom)
3)myMessages.prependMessage(messageParameters, animate);Add new message to the beginning (to the top)
4)myMessages.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
5)myMessages.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
6)myMessages.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.
7)myMessages.scrollMessages();Scroll messages to top/bottom depending on newMessagesFirst parameter
8)myMessages.layout();Apply messages auto layout
9)myMessages.clean();Clean/remove all the messages
10)myMessages.destroy();Destroy messages instance

Example

Test it Now




Latest Courses