Framework7 v2
Support Framework7
stars forks
Improve this Doc

Messagebar Vue Component

Messagebar Vue component represents Framework7's Messagebar component.

Messagebar Components

There are following components included:

  • f7-messagebar - main messagebar element
  • f7-messagebar-sheet - messagebar sheet element
  • f7-messagebar-sheet-image - messagebar sheet image item
  • f7-messagebar-sheet-item - messagebar sheet item
  • f7-messagebar-attachments - messagebar attachments element
  • f7-messagebar-attachment - single messagebar attachment element

Messagebar Properties

Prop Type Default Description
<f7-messagebar> properties
init boolean true Initializes Messagebar
name string Textarea "name" attribute
placeholder string Message Textarea placeholder text
value string
number		 Textarea value
readonly boolean false Sets "readonly" textarea attribute
disabled boolean false Sets "disbled" textarea attribute
send-link string Enables Send link and specifies its text. This property will be ignored in case you use send-link slot
max-height number Defines resizeable textarea max height
resizable bolean true Enables resizeable textarea
sheet-visible boolean false Makes messagebar sheet visible/active
attachments-visible boolean false Makes messagebar attachments visible/active
<f7-messagebar-sheet-image> properties
image string Sheet image URL
checked boolean false Indicates whether this sheet image-item is checked or not
<f7-messagebar-attachment> properties
image string Attachment image URL
deletable boolean true Defines whether the attachment is deletable or not. In case of deletable the additional delete button will be rendered

Messagebar Methods

<f7-messagebar> methods
.clear() Clear textarea and update/reset its size
.setValue(newValue) Set messagebar textarea value/text
.getValue() Return messagebar textarea value
.resizePage() Force Messagebar to resize messages page depending on messagebar height/size
.focus() Focus messagebar textarea
.blur() Remove focus from messagebar textarea

Messagebar Events

Event Arguments Description
<f7-messagebar> events
change (event) Event will be triggered when "change" event occurs on messagebar textarea element
input (event) Event will be triggered when "input" event occurs on messagebar textarea element
focus (event) Event will be triggered when "focus" event occurs on messagebar textarea element
blur (event) Event will be triggered when "blur" event occurs on messagebar textarea element
submit
send		 (value, clear) Event will be triggered when user clicks on messagebar "send link"
<f7-messagebar-sheet-image> events
change (event) Event will be triggered on sheet item checkbox change
<f7-messagebar-attachment> events
attachment:click (event) Event will be triggered on attachment click
attachment:delete (event) Event will be triggered on attachment delete button click

Messagebar Slots

Messagebar Vue component has additional slots for custom elements:

  • default - element will be inserted in the end of <div class="toolbar-inner">
  • before-area - element will be inserted right before textarea. Messagebar attachments go here
  • after-area - element will be inserted right after textarea
  • send-link - element will be inserted inside of send link
  • before-inner - element will be inserted right before <div class="toolbar-inner">
  • after-inner - element will be inserted right after <div class="toolbar-inner">
  • inner-start - element will be inserted in the beginning of <div class="toolbar-inner">
  • inner-end - element will be inserted in the end of <div class="toolbar-inner">default slot
<f7-messagebar placeholder="Message" @submit="onSubmit">
  <div slot="before-inner">Before inner</div>
  <div slot="after-inner">After inner</div>
  <div slot="before-area">Before textarea</div>
  <div slot="after-area">After textarea</div>
  <f7-icon if-ios="f7:arrow_up_fill" if-md="material:send" slot="send-link"></f7-icon>
  <div>Default slot</div>
</f7-messagebar>

Renders to:

<div class="toolbar messagebar">
  <div>Before inner</div>
  <div class="toolbar-inner">
    <div class="messagebar-area">
      <div>Before textarea</div>
      <textarea placeholder="Message"></textarea>
      <div>After textarea</div>
    </div>
    <a href="#" class="link"><i class="icon f7-icons">arrow_up_fill</i></a>
    <div>Default slot</div>
  </div>
  <div>After inner</div>
</div>

Access To Messagebar Instance

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

Examples

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

<!-- Renders to: -->

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

With Sheet And Attachments

<template>
  <f7-page>
    <f7-navbar title="Messsages" back-link="Back"></f7-navbar>

    <f7-messagebar
      :placeholder="placeholder"
      ref="messagebar"
      :attachmentsVisible="attachmentsVisible"
      :sheetVisible="sheetVisible"
    >
      <!-- Link to toggle Sheet -->
      <f7-link
        icon-if-ios="f7:camera_fill"
        icon-if-md="material:camera_alt"
        slot="inner-start"
        @click="sheetVisible = !sheetVisible"
      ></f7-link>
      <!-- Send Message Link -->
      <f7-link
        icon-if-ios="f7:arrow_up_fill"
        icon-if-md="material:send"
        slot="inner-end"
        @click="sendMessage"
      ></f7-link>
      <!-- Attachments -->
      <f7-messagebar-attachments>
        <f7-messagebar-attachment
          v-for="(image, index) in attachments"
          :key="index"
          :image="image"
          @attachment:delete="deleteAttachment(image)"
        ></f7-messagebar-attachment>
      </f7-messagebar-attachments>
      <!-- Sheet -->
      <f7-messagebar-sheet>
        <f7-messagebar-sheet-image
          v-for="(image, index) in images"
          :key="index"
          :image="image"
          :checked="attachments.indexOf(image) >= 0"
          @change="handleAttachment"
        ></f7-messagebar-sheet-image>
      </f7-messagebar-sheet>
    </f7-messagebar>

    <f7-messages>
      ...
    </f7-messages>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        attachments: [],
        sheetVisible: false,
        // Sheet images available
        images: [
          'http://lorempixel.com/300/300/cats/1/',
          'http://lorempixel.com/200/300/cats/2/',
          'http://lorempixel.com/400/300/cats/3/',
          'http://lorempixel.com/300/150/cats/4/',
          'http://lorempixel.com/150/300/cats/5/',
          'http://lorempixel.com/300/300/cats/6/',
          'http://lorempixel.com/300/300/cats/7/',
          'http://lorempixel.com/200/300/cats/8/',
          'http://lorempixel.com/400/300/cats/9/',
          'http://lorempixel.com/300/150/cats/10/',
        ],
      };
    },
    computed: {
      attachmentsVisible() {
        const self = this;
        return self.attachments.length > 0;
      },
      placeholder() {
        const self = this;
        return self.attachments.length > 0 ? 'Add comment or Send' : 'Message';
      },
    },
    methods: {
      deleteAttachment(image) {
        const self = this;
        const index = self.attachments.indexOf(image);
        self.attachments.splice(index, 1)[0]; // eslint-disable-line
      },
      handleAttachment(e) {
        const self = this;
        const index = self.$$(e.target).parents('label.checkbox').index();
        const image = self.images[index];
        if (e.target.checked) {
          // Add to attachments
          self.attachments.unshift(image);
        } else {
          // Remove from attachments
          self.attachments.splice(self.attachments.indexOf(image), 1);
        }
      },
      sendMessage() {
        const self = this;
        const text = self.messagebar.getValue().replace(/\n/g, '<br>').trim();
        // the rest of logic to send a message
      },
      onF7Ready() {
        const self = this;
        self.messagebar = self.$refs.messagebar.f7Messagebar;
      },
    },
  };
</script>