Framework7 MessagesFramework7 Messages are the components which are used for comment and messaging system in the application. Messages layoutMessages Page LayoutFollowing 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 PartsFollowing 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 ContainerA 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 MessageIndex | 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 JavaScriptThe 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 ParametersIndex | 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 MethodsFollowing 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 |
ExampleTest it Now
|