Language: ENCN

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
<f7-messagebar placeholder="Message" send-link="Send" @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>
  <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">Send</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
max-height number Defines resizeable textarea max height

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.