Message Bar Vue Component

Message Bar Vue component represents Framework7's Message Bar component.

Usage example

<f7-messagebar placeholder="Message" send-link="Send" @submit="onSubmit"></f7-messagebar>

Renders to:

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

Slots

Message Bar Vue component has additional slots for custom elements:

• before-input - element will be inserted right before <div class="toolbar-inner"> element
• after-input - element will be inserted right after <div type="toolbar-inner"> element
• before-textarea - element will be inserted right before textarea
• after-textarea - element will be inserted right after textarea
• send-link - element will be inserted inside of send link

<f7-messagebar placeholder="Message" @submit="onSubmit">
  <div slot="before-inner">Before inner</div>
  <div slot="after-inner">After inner</div>
  <div slot="before-textarea">Before textarea</div>
  <div slot="after-textarea">After textarea</div>
  <span slot="send-link">Send</span>
  <div>Default slot</div>
</f7-messagebar>

Renders to:

<div class="toolbar messagebar">
  <div>Before inner</div>
  <div class="toolbar-inner">
    <div>Before textarea</div>
    <textarea placeholder="Message"></textarea>
    <div>After textarea</div>
    <a href="#" class="link"><span>Send</span></a>
    <div>Default slot</div>
  </div>
  <div>After inner</div>
</div>

Properties

Prop	Type	Default	Description
init	boolean	true	Initializes Message Bar
name	string		Textarea "name" attribute
placeholder	string	"Message"	Textarea placeholder text
value	string/number		Textarea value
readonly	boolean		Sets "readonly" textarea attribute
disabled	boolean		Sets "disbled" textarea attribute
send-link	string		Enables Send link and specifies its text or its inner HTML. This property will be ignored in case you use "send-link" slot
max-height	number		Defines resizeable textarea max height

Methods

.clear()	Clear textarea and update/reset its size
.setValue(newValue)	Set messagebar textarea value/text
.getValue()	Return messagebar textarea value

Events

Event	Description
change	Event will be triggered when "change" event occurs on message bar textarea element
input	Event will be triggered when "input" event occurs on message bar textarea element
focus	Event will be triggered when "focus" event occurs on message bar textarea element
blur	Event will be triggered when "blur" event occurs on message bar textarea element
submit	Event will be triggered when user clicks on message bar "send link"

Access To Initialized Instance

If you use automatic initalization to init Message Bar (with init:true prop) and need to use its Methods and Properties you can access its initialized instance by accessing .f7Messagebar component's property.