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

Применение режимов отображения

Параметры отображения​

Виджет Editor можно отображать различными способами в соответствии с разными дизайнами интерфейса и потребностями взаимодействия с пользователем. Он может выглядеть как встроенная форма, модальный диалог или боковая панель. Макет боковой панели дополнительно поддерживает однocolumn или двухколоночное расположение для организации полей ввода.

Отображение Editor как встроенной формы​

<script>
    import { Editor } from "@svar-ui/svelte-editor";
    const items = [ /*editor config*/ ];
</script>

<Editor {items} placement="inline" />

Встроенное размещение формы интегрирует редактор непосредственно в содержимое страницы. Этот вариант подходит для сценариев, где редактор должен быть частью непрерывного рабочего процесса без прерывания навигации пользователя. Он часто используется в представлениях панели управления или управленческих представлениях, где редактор встроен без разрывов.

Inline

Отображение Editor как модального диалога​

<script>
    import { Editor } from "@svar-ui/svelte-editor";
    const items = [ /*editor config*/ ];
</script>

<Editor {items} placement="modal" />

Размещение в виде модального диалога открывает редактор как центрированное наложение. Этот подход идеален, когда процесс редактирования требует полного внимания пользователя и не должен смешиваться с другими элементами страницы. Он обычно используется для создания или редактирования важных записей, где необходимы концентрация и изоляция.

Modal

Связанный пример: Modal Editor

Отображение Editor как боковой панели​

<script>
    import { Editor } from "@svar-ui/svelte-editor";
    const items = [ /*editor config*/ ];
</script>

<Editor {items} placement="sidebar" />

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

Sidebar

Связанный пример: Sidebar Editor

Отображение Editor в двух колонках​

column?: "left" | "right"
<script>
    import { Editor } from "@svar-ui/svelte-editor";

    const items = [
        { comp: "text", key: "name", label: "Name", column: "left" },
        {
            comp: "textarea",
            key: "descr",
            label: "Description",
            column: "left", // move to left column
        },
        { comp: "checkbox", key: "admin", label: "Is Admin" }
    ];
</script>

<Editor {items} values={data} layout="columns" />

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

columns

Связанный пример: Modal Editor with columns