Zum Hauptinhalt springen

Anzeigemodi anwenden

Anzeigeoptionen​

Das Editor-Widget kann auf verschiedene Arten dargestellt werden, um unterschiedlichen Oberflächendesigns und Benutzerinteraktionsanforderungen gerecht zu werden. Es kann als eingebettetes Formular, modaler Dialog oder Seitenleisten-Panel angezeigt werden. Das Seitenleisten-Panel-Layout unterstützt außerdem eine ein- oder zweispaltige Anordnung zur Organisation von Eingabefeldern.

Editor als eingebettetes Formular anzeigen​

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

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

Die Inline-Platzierung integriert den Editor direkt in den Seiteninhalt. Diese Option eignet sich für Szenarien, in denen der Editor Teil eines durchgehenden Workflows sein soll, ohne die Navigation des Benutzers zu unterbrechen. Sie wird häufig in Dashboard- oder Verwaltungsansichten eingesetzt, in denen der Editor nahtlos eingebettet ist.

Inline

Editor als modalen Dialog anzeigen​

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

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

Die modale Dialog-Platzierung öffnet den Editor als zentriertes Overlay. Dieser Ansatz ist ideal, wenn der Bearbeitungsprozess die volle Aufmerksamkeit des Benutzers erfordert und nicht mit anderen Seitenelementen vermischt werden soll. Er wird häufig zum Erstellen oder Bearbeiten wichtiger Datensätze verwendet, bei denen Fokus und Isolation notwendig sind.

Modal

Verwandtes Beispiel: Modal Editor

Editor als Seitenleisten-Panel anzeigen​

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

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

Die Seitenleisten-Panel-Platzierung heftet den Editor an den Rand des Bildschirms. Dieses Layout ist effektiv für Workflows, bei denen der Editor dem Hauptinhalt untergeordnet ist, aber dennoch zugänglich sein muss. Es eignet sich gut für Anwendungen, in denen Benutzer Aufgaben wie das Überprüfen von Details oder schnelle Bearbeitungen durchführen, während der Hauptkontext sichtbar bleibt.

Sidebar

Verwandtes Beispiel: Sidebar Editor

Editor in zwei Spalten anzeigen​

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" />

Das zweispaltige Layout ordnet Eingabefelder in separate linke und rechte Bereiche innerhalb der Seitenleiste an. Diese Konfiguration ist nützlich, wenn mehrere Eingabefelder vorhanden sind und eine visuelle Gruppierung den Benutzern hilft, das Formular effizienter zu verstehen und zu navigieren. Beispielsweise können wichtige Details in der linken Spalte und ergänzende Optionen in der rechten Spalte platziert werden.

columns

Verwandtes Beispiel: Modal Editor with columns