Перейти к основному содержимому

Настройка панели инструментов

Конфигурация панели инструментов​

Виджет Editor позволяет добавлять и настраивать панели инструментов. Панели инструментов можно размещать вверху или внизу редактора, и они могут содержать интерактивные элементы: кнопки, метки и меню. Панели инструментов улучшают взаимодействие с пользователем и обеспечивают быстрый доступ к конкретным действиям или информации.

Добавление верхней панели инструментов в Editor​

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

const topBar = {
  items: [
    { comp: "spacer" },
    { comp: "button", text: "Click me", onClick: () => alert("clicked") },
  ],
};

export default function Example() {
  return <Editor topBar={topBar} />;
}

Эта конфигурация добавляет верхнюю панель инструментов в редактор. Панель содержит разделитель пространства для выравнивания макета и кнопку с подписью "Click me". При нажатии кнопки отображается всплывающее сообщение. Такая настройка удобна для размещения важных действий или элементов управления в верхней части редактора для быстрого доступа.

topbar

Добавление нижней панели инструментов в Editor​

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

const bottomBar = {
  items: [
    { comp: "spacer" },
    { comp: "button", text: "Click me", handler: () => alert("clicked") },
  ],
};

export default function Example() {
  return <Editor bottomBar={bottomBar} />;
}

Эта конфигурация создаёт нижнюю панель инструментов в редакторе. Как и верхняя панель, она содержит разделитель пространства и кнопку "Click me", которая при нажатии отображает всплывающее сообщение. Такой вариант обычно используется для действий или настроек, которые менее критичны, но должны быть легко доступны.

Добавление верхней панели инструментов со значениями формы​

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

const topBar = {
  items: [
    { comp: "label", spacer: true, key: "label" },
    { comp: Switch, key: "state" },
  ],
};

const values = {
  label: "Product N1",
  state: false,
};

export default function Example() {
  return <Editor topBar={topBar} values={values} />;
}

Эта настройка добавляет верхнюю панель инструментов, которая динамически использует значения формы для заполнения своих элементов. Метка отображает значение ключа label, а переключатель управляет значением ключа state. Такая конфигурация идеально подходит для отображения и изменения настроек или метаданных непосредственно в панели инструментов.

toolbar_values

Создание меню действий в панели инструментов​

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

const buttonClick = (id) => {
  alert(`Action: ${id}`);
};

const topBar = {
  items: [
    {
      comp: "label",
      spacer: true,
      text: "Item X12-A",
    },
    { comp: "separator" },
    {
      icon: "wxi-dots-v",
      collapsed: true,
      layout: "column",
      items: [
        {
          id: "done",
          comp: "item",
          text: "Mark as done",
          handler: () => buttonClick("done"),
        },
        {
          id: "delete",
          comp: "button",
          type: "danger",
          text: "Delete the item",
          handler: () => buttonClick("delete"),
        },
      ],
    },
  ],
};

export default function Example() {
  return <Editor topBar={topBar} />;
}

Эта конфигурация добавляет меню действий в верхнюю панель инструментов. Меню состоит из подписанного элемента, разделителя и выпадающего меню, активируемого иконкой. Выпадающее меню содержит пункты "Mark as done" и "Delete the item", каждый из которых связан с соответствующей функцией-обработчиком. Это особенно удобно для предоставления контекстных действий, связанных с содержимым или состоянием редактора, без перегруженности панели инструментов.

actionmenu

Связанный пример: Toolbar values