본문으로 건너뛰기

표시 모드 적용

표시 옵션​

Editor 위젯은 다양한 인터페이스 디자인과 사용자 상호작용 요구에 맞게 여러 방식으로 표시할 수 있습니다. 인라인 폼, 모달 다이얼로그, 사이드바 패널로 표시할 수 있으며, 사이드바 패널 레이아웃은 입력 항목을 정리하기 위한 단일 열 또는 두 열 배치를 추가로 지원합니다.

Editor를 인라인 폼으로 표시하기​

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

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

인라인 폼 배치는 editor를 페이지 콘텐츠에 직접 통합합니다. 이 옵션은 사용자의 탐색을 방해하지 않고 연속적인 워크플로우의 일부로 editor가 필요한 시나리오에 적합합니다. editor가 자연스럽게 포함된 대시보드나 관리 화면에서 자주 사용됩니다.

Inline

Editor를 모달 다이얼로그로 표시하기​

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

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

모달 다이얼로그 배치는 editor를 화면 중앙의 오버레이로 엽니다. 이 방식은 편집 과정에서 사용자의 완전한 집중이 필요하고 다른 페이지 요소와 혼합되어서는 안 되는 경우에 적합합니다. 집중과 독립성이 필요한 중요한 레코드를 생성하거나 편집할 때 일반적으로 사용됩니다.

Modal

관련 예제: Modal Editor

Editor를 사이드바 패널로 표시하기​

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

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

사이드바 패널 배치는 editor를 화면 측면에 배치합니다. 이 레이아웃은 editor가 주요 콘텐츠보다 보조적이지만 여전히 접근 가능해야 하는 워크플로우에 효과적입니다. 사용자가 주요 컨텍스트를 유지하면서 세부 정보를 검토하거나 빠른 편집을 수행하는 애플리케이션에 적합합니다.

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