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​

import { Editor } from "@svar-ui/react-editor";

<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);
  }}
/>

Hide the top bar:

<Editor items={items} values={values} topBar={false} />