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​

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

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

Hide the bottom bar:

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