Skip to main content

bottomBar

Controls the bottom toolbar. false hides it, true allows the automatic default bar, and an object renders an explicit set of toolbar items.

Usage​

bottomBar?: boolean | IBarConfig;
  • true - (default) allows the automatic bar. The default save/cancel bar is generated only when both topBar and bottomBar are exactly true.
  • false - hides the bottom bar.
  • IBarConfig - renders the given toolbar items.

IBarConfig:

FieldTypeDescription
itemsany[]Toolbar item configs; an item with id: "save" runs the save flow before onaction.
layout"row" | "column"Direction the items are arranged in.

Example​

<script setup>
import { Editor } from "@svar-ui/vue-editor";
</script>

<template>
  <Editor
    :items="items"
    :values="values"
    :bottomBar="{
      items: [
        { comp: 'spacer' },
        { comp: 'button', id: 'cancel', text: 'Cancel' },
        { comp: 'button', id: 'save', text: 'Save' }
      ]
    }"
  />
</template>

Hide the bottom bar:

<Editor :items="items" :values="values" :bottomBar="false" />