-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
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" |