Framework7 Message Bar

Framework7 Message bar is a resizable toolbar for usage with messages. It provides a special resizable toolbar to work with messaging system in application.

Syntax for message bar layout:

<div class="page toolbar-fixed">
  <div class="toolbar messagebar">
  <div class="toolbar-inner">
    <textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
  </div>
</div>   
</div>

The place for message bar layout is very important and it should be inside the page and right before message content.

<div class="page toolbar-fixed">
  <!-- messagebar -->
  <div class="toolbar messagebar">
    <div class="toolbar-inner">
      <textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
    </div>
  </div>
  <!-- messages-content -->
  <div class="page-content messages-content">
    <div class="messages">
      ... messages
    </div>
  </div>
</div>

Initialize Message bar with JavaScript

You can use the following method for initializing the message bar with JavaScript:

The method has two options:

messagesbarContainer: It is a required HTML element or string that includes messagebar container HTML element.

parameters: It specifies an object with messagebar parameters.

For example:

var myMessagebar = app.messagebar('.messagebar', {
   maxHeight: 200
});

Messagebar Parameter

maxHeight: It is used to set maximum height of textarea and will be resized depending on the amount of its text. The type of parameter is number and the default value is null.

Messagebar Properties

The following table shows the messagebar properties:

Index	Property	Description
1)	myMessagebar.params	You can specify object with passed initialization parameters.
2)	myMessagebar.container	You can specify dom7 element with messagebar container HTML element.
3)	myMessagebar.textarea	You can specify dom7 element with messagebar textarea HTML element.

Messagebar Methods

Index	Method	Description
1)	myMessagebar.value(newValue);	It sets messagebar textarea value/text and returns messagebar textarea value, if newValue is not specified.
2)	myMessagebar.clear();	It clears the textarea and updates/resets the size.
3)	myMessagebar.destroy();	It destroy messagebar instance.

Initialize Messagebar with HTML

If you don't want to use messagebar method and properties, you can initialize it using HTML without JavaScript.

You just need to add the messagebar-init class to the .messagebar and you can pass the required parameters using data- attributes.

See the following code how to initialize the messagebar with HTML:

<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
   <div class = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" class = "link">Send</a>
   </div>
</div>

Next TopicFramework7 Refresh

← prev next →