82
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:
| Index | Class | Description |
|---|---|---|
| 1) | message-sent | It specifies that message was sent by the user and is displayed with green background color on the right side. |
| 2) | message-received | It 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-pic | It is an additional class for displaying image with a single message. |
| 4) | message-with-avatar | It is an additional class for displaying a single message (received or sent) with avatar. |
| 5) | message-with-tail | You can add a bubble tail for single message (received or sent). |
Additional Available Classes for Single Message
| Index | Class | Description |
|---|---|---|
| 1) | message-hide-name | It is an additional class for hiding message name for a single message (received or sent). |
| 2) | message-hide-avatar | It is an additional class for hiding message avatar for a single message (received or sent). |
| 3) | message-hide-label | It is an additional class for hiding message label for a single message (received or sent). |
| 4) | message-last | You 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-first | You 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
| Index | Parameter | Type | Description |
|---|---|---|---|
| 1) | autoLayout | boolean | It adds additional required classes to each message by enabling it. |
| 2) | newMessagesFirst | boolean | You can display message on top instead of displaying on bottom by enabling it. |
| 3) | messages | array | It displays an array of messages in which each message should be represented as object with message parameters. |
| 4) | messageTemplate | string | It displays the single message template. |
Message Methods
Following is a list of message methods:
| Index | Method | Description |
|---|---|---|
| 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
Next TopicFramework7 Message Bar