Message Bar React Component

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

Usage example

<Messagebar placeholder="Message" sendLink="Send" onSubmit={onSubmit}></Messagebar>

Renders to:

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

Slot Properties

Message Bar React component has additional slots for custom elements:

  • beforeInnerSlot - element will be inserted right before <div class="toolbar-inner"> element
  • afterInnerSlot - element will be inserted right after <div type="toolbar-inner"> element
  • beforeTextareaSlot - element will be inserted right before textarea
  • afterTextareaSlot - element will be inserted right after textarea
  • sendLinkSlot - element will be inserted inside of send link
<Messagebar 
  placeholder="Message"
  onSubmit={onSubmit}
  beforeInnerSlot={<div>Before inner</div>}
  afterInnerSlot={<div>After inner</div>}
  beforeTextareaSlot={<div>Before textarea</div>}
  afterTextareaSlot={<div>After textarea</div>}
  sendLinkSlot={<span>Send</span>}              
>
  Text goes here
</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
sendLink string Enables Send link and specifies its text or its inner HTML. This property will be ignored in case you use "send-link" slot
maxHeight number Defines resizeable textarea max height

Event Properties

Event Description
onChange Event will be triggered when "change" event occurs on message bar textarea element
onInput Event will be triggered when "input" event occurs on message bar textarea element
onFocus Event will be triggered when "focus" event occurs on message bar textarea element
onBlur Event will be triggered when "blur" event occurs on message bar textarea element
onSubmit Event will be triggered when user clicks on message bar "send link"