본문으로 건너뛰기

디스플레이 모드 적용

디스플레이 옵션​

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