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

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

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

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

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

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

<Editor {topBar} />

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

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

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

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

<Editor {bottomBar} />

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

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

<script>
  import { Editor } from "@svar-ui/svelte-editor";
  import { Switch } from "@svar-ui/svelte-core";

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

  const values = {
    label: "Product N1",
    state: false
  };
</script>

<Editor {topBar} {values} />

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

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

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

  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,
          },
          {
           id: "delete",
           comp: "button",
           type: "danger",
           text: "Delete the item",
           handler: buttonClick,
          },
        ],
      },
    ]
  };
</script>

<Editor {topBar} />

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

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