Message Bar React component represents Framework7's Message Bar component.
<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>
Message Bar React component has additional slots for custom elements:
<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>
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 | 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" |