Skip to main content

topBar

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

Usage​

topBar?: boolean | IBarConfig;
  • true - (default) allows the automatic bar. The default save/cancel/close bar is generated only when both topBar and bottomBar are exactly true.
  • false - hides the top 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"
    :topBar="{
      items: [
        { comp: 'spacer' },
        { comp: 'icon', icon: 'wxi-delete', id: 'delete' },
        { comp: 'button', type: 'primary', id: 'save', text: 'Save' }
      ]
    }"
    :onaction="({ item }) => {
      if (item.id === 'delete') remove(values.id);
    }"
  />
</template>

Hide the top bar:

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