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

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

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

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

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

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

<template>
    <Editor :items="items" placement="inline" />
</template>

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

Inline

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

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

<template>
    <Editor :items="items" placement="modal" />
</template>

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

Modal

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

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

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

<template>
    <Editor :items="items" placement="sidebar" />
</template>

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

Sidebar

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

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

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

<template>
    <Editor :items="items" :values="data" layout="columns" />
</template>

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

columns

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