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

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

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

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

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

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

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

<template>
  <Editor :topBar="topBar" />
</template>

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

topbar

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

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

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

<template>
  <Editor :bottomBar="bottomBar" />
</template>

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

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

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

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

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

<template>
  <Editor :topBar="topBar" :values="values" />
</template>

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

toolbar_values

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

<script setup>
  import { Editor } from "@svar-ui/vue-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>

<template>
  <Editor :topBar="topBar" />
</template>

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

actionmenu

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