Message Bar

Framework7 comes with special resizealbe toolbar for usage with Messages

Message Bar Layout

Message Bar layour is pretty simple:

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

Its place is very important, it should be inside of "page" and right before "messages-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>
  <!-- messages-content -->
  <div class="page-content messages-content">
    <div class="messages">
      ... messages

Initialize Messagebar with JavaScript

Now, when we have Messagebar' HTML, we need to initialize it. We need to use related App's method:

myApp.messagebar(messagebarContainer, parameters) - initialize Messagebar with options

  • messagebarContainer - HTMLElement or string (with CSS Selector) of Messagebar container HTML element. Required.
  • parameters - object - object with Messagebar parameters. Optional.
  • Method returns initialized Messagebar instance

For example:

var myMessagebar = app.messagebar('.messagebar', {
    maxHeight: 200
Note that Messagebar container should be in DOM on a moment of initialization. So if you use it not on home page, you need to initialize it within page:init event or callback

Messagebar Parameters

Let's look on list of all available parameters:

Parameter Type Default Description
maxHeight number null Max height of textarea when it resized depending on amount of its text

Messagebar Methods & Properties

After we initialize Messagebar we have its initialized instance in variable (like myMessagebar variable in example above) with helpful methods and properties:

myMessagebar.params Object with passed initialization parameters
myMessagebar.container Dom7 element with messagebar container HTML element.
myMessagebar.textarea Dom7 element with messagebar textarea HTML element
myMessagebar.value(newValue); Set messagebar textarea value/text. Or return messagebar textarea value if newValue is not specified
myMessagebar.clear(); Clear textarea and update/reset its size
myMessagebar.destroy(); Destroy messagebar instance

Initialize Messagebar with HTML

If you don't need to use Messagebar methods and properties you can initialize it using HTML without JavaScript. You can do that just by adding additional "messagebar-init" class to .messagebar. In this case we may pass required parameters using data- attributes.

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

Parameters that used in camelCase, for example maxHeight, in data- attributes should be used as hypens-case as data-max-height

Access to Messagebar's Instance

If you initialize Messagebar using HTML it is still possible to access to Messagebar's instance. It is "f7Messagebar" property of messagebar's container HTML element:

var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');