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:
The place for message bar layout is very important and it should be inside the page and right before message content.
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:
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: