Framework7 Messages - Framework7

How Messages work in Framework7?

Description

Messages are a component of Framework7 which give visualization of comments and messaging system in the application.

Messages Layout

Framework7 has below message layout structure:

Layout consists of below classes in different areas:

Messages Page Layout

Below table shows the classes of messages page layout with description.

S.N.

Classes & Description

1

messages-content
This is a required additional class added to "page-content" and used for messages wrapper.

2

messages
This is a required element for messages bubbles.

3

messages-date
This uses date stamp container for displaying date and time of message sent or received.

4

message
This is a single message to be displayed.

Single Message Inner Parts

Below table shows the classes of simple message inner parts with description.

S.N.

Classes & Description

1

message-name
This provides the sender name.

2

message-text
This will define the text with bubble type.

3

message-avatar
This specifies the sender avatar.

4

message-label
This specifies the text label below the bubble.

Additional classes for Single Message Container

Below table shows additional classes for single message container description.

S.N.

Classes & Description

1

message-sent
This specifies that the message was sent by the user and displays with green background color on the right side.

2

message-received
This is used to display a single message to indicate that the message was received by user and stays on left side with grey background color.

3

message-pic
This is an additional class used for displaying image with a single message.

4

message-with-avatar
This is an additional class for displaying a single message (received or sent) with avatar.

5

message-with-tail
User can add bubble tail for single message (received or sent).

Additional Available Classes for Single Message

Below table shows available classes for a single message with description.

S.N.

Classes & Description

1

message-hide-name
This is an additional class for hiding message name for a single message (received or sent).

2

message-hide-avatar
This is an additional class for hiding message avatar for a single message (received or sent).

3

message-hide-label
This is an additional class for hiding message label for a single message (received or sent).

4

message-last
User can use this class to indicate last received or sent message in current conversation by one sender for a single message (received or sent).

5

message-first
User can use this class for indicating first received or first sent message in the current conversation by one sender for a single message (received or sent).

Initializing Messages with JavaScript

User can initialize the messages with JavaScript using below method:

This method has two options:

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

Messages Parameters

Below table shows the parameters of messages with description.

S.N.

Parameter & Description

Type

Default

1

autoLayout
This adds additional required classes to each message by enabling it.

boolean

true

2

newMessagesFirst
User can display message on top instead of displaying at the bottom by enabling it.

boolean

false

3

messages
This displays an array of messages in which each message will be represented as object with message parameters.

array

-

4

messageTemplate
This displays a single message template.

string

-

Messages Properties

Below table shows the properties of messages with description.

S.N.

Property & Description

1

myMessages.params
User can initialize passed parameters with object.

2

myMessages.container
This defines the DOM7 element with message bar HTML container.

Messages Methods

Below table shows the methods of messages with description.

S.N.

Method & Description

1

myMessages.addMessage(messageParameters, method, animate);
Message can be added to the beginning or to the end by using method parameter.

It has below parameters:

  • messageParameters: This provides message parameters to add.
  • method: This is a string type that adds message to the beginning or to the end of messages container.
  • animate: This is a boolean type which adds message without any transition or scrolling animation by setting it to false and by default it will be true.

2

myMessages.appendMessage(messageParameters, animate);
This adds message to the end of message container.

3

myMessages.prependMessage(messageParameters, animate);
This adds message to the beginning of message container.

4

myMessages.addMessages(messages, method, animate);
User can add multiple messages at a time.

It has below parameter:

  • messages: This provides array of messages to add to decide which should be represented as object with message parameters.

5

myMessages.removeMessage(message);
This is used to remove message.

It has below parameter:

  • message: This is a required HTML element or string that removes the message element.

6

myMessages.removeMessages(messages);
User can remove multiple messages.

It has below parameter:

  • messages: This is a required array with HTML elements or string that removes the messages.

7

myMessages.scrollMessages();
User can scroll the messages from top to bottom and vice versa depending on the first parameter of new message.

8

myMessages.layout();
Auto layout can be applied to the messages.

9

myMessages.clean();
This is used to clean the messages.

10

myMessages.destroy();
This is used to destroy the messages.

Single Message Parameters

Below table shows parameters for single message with description.

S.N.

Parameter & Description

Type

Default

1

text
This defines the message text which can be a HTML string.

string

-

2

name
This specifies the sender name.

string

-

3

avatar
This specifies the sender avatar URL string.

string

-

4

time
This specifies the time string of the message like '9:45 AM', '18:35'.

string

-

5

type
This specifies type of message whether it should be sent or received message.

string

Sent

6

label
This defines the label of the message.

string

-

7

day
This specifies a day string of the message like 'sunday', 'monday', 'yesterday' etc.

string

-

Initializing Messages with HTML

User can initialize the messages with HTML without JavaScript by using the additional messages-init class to messages and use the data attributes to pass required parameters as shown in the below code snippet:

Example

Below example demonstrates the use of messages in the Framework7:

Output

Below are the steps to see how above code works:

  • Save above HTML code as messages.html file in the server root folder.
  • Open this HTML file as http://localhost/messages.html and below output gets displayed.
  • When the user types a message into the message box and clicks on send button, it will specify that your message has been sent and is displayed with green background color on the right side.
  • Message which you receive appears on the left side with the grey background along with the sender name.

Messages

Send

Friday, Apr 26 10:30

Hello

Happy Birthday

Smith

Thank you

Saturday, Apr 27 9:30

Good Morning...

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Framework7 Topics