跳到主要内容

应用显示模式

显示选项​

Editor widget 可以通过多种方式显示，以适应不同的界面设计和用户交互需求。它可以作为内联表单、模态对话框或侧边栏面板呈现。侧边栏面板布局还支持单列或双列排列，用于组织输入项。

将 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