Messagebar Vue Component

    Messagebar Vue component represents Framework7’s Messagebar component.

    There are following components included:

    • - 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

    Messagebar Events

    Messagebar Vue component has additional slots for custom elements:

    • 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">. element
    • - element will be inserted right after <div class="toolbar-inner">. element. Messagebar sheet goes here
    • inner-start - element will be inserted in the beginning of <div class="toolbar-inner">. element

    Renders to:

    Access To Messagebar Instance

    Here is how the full example of Messages page where it can be used together with Messages: