Formularlayout organisieren

Formularstruktur

Das Editor-Widget bietet mehrere Möglichkeiten, das Formularlayout zu strukturieren und zu organisieren. Es unterstützt die Unterteilung des Formulars in logische Gruppen, wie Batches, Sektionen oder ein- und ausklappbare Accordion-Sektionen. Diese Flexibilität ermöglicht es Entwicklern, benutzerfreundliche Oberflächen zu erstellen, in denen Felder effizient gruppiert und navigiert werden können. Nachfolgend sind die unterstützten Konfigurationen aufgeführt:

Formular in Batches aufteilen mit einem sichtbaren Batch

Der Editor ermöglicht das Aufteilen von Formularfeldern in separate Batches, wobei jeweils nur ein Batch sichtbar ist. Dies ist nützlich für die Erstellung von Schritt-für-Schritt-Formularen oder zur Vereinfachung komplexer Formulare.

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Combo } from "@svar-ui/svelte-core";

   registerEditorItem("combo", Combo);

   const items = [
      {
        comp: "text",
        key: "name",
        batch: "main",
        label: "Name",
      },
      {
        key: "theme",
        batch: "cfg",
        comp: "combo",
        label: "Theme",
        options: [
           { id: "light", label: "Light" },
           { id: "dark", label: "Dark" },
        ],
      },
   ];

</script>

<Editor {items} activeBatch="cfg" />

In diesem Beispiel ist die activeBatch-Eigenschaft auf "cfg" gesetzt, sodass nur die dem Batch "cfg" zugewiesenen Felder angezeigt werden. Dieser Ansatz eignet sich ideal für Formulare mit mehreren logischen Abschnitten, die jeweils einzeln angezeigt werden sollen.

Tab-Leiste zum Wechseln zwischen Batches verwenden

Der Editor unterstützt tab-basierte Navigation zum Wechseln zwischen Batches. Diese Methode eignet sich für Formulare mit mehreren Abschnitten, zwischen denen Benutzer über Tabs navigieren können.

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Tabs, Combo } from "@svar-ui/svelte-core";

   registerEditorItem("combo", Combo);

   const options = [
      {
        id: "main",
        label: "Personal",
      },
      {
        id: "cfg",
        label: "Settings",
      },
   ];

   const items = [
      {
        comp: "text",
        key: "name",
        batch: "main",
        label: "Name",
      },
      {
        key: "theme",
        batch: "cfg",
        comp: "combo",
        label: "Theme",
        options: [
           { id: "light", label: "Light" },
           { id: "dark", label: "Dark" },
        ],
      },
   ];

   const activeBatch = $state("cfg");
</script>

<Editor {items} {activeBatch}>
   <Tabs {options} bind:value={activeBatch}></Tabs>
</Editor>

Hier wird die Tabs-Komponente verwendet, um Benutzern die Auswahl des anzuzeigenden Batches zu ermöglichen. Die activeBatch-Bindung stellt sicher, dass der Editor die entsprechenden Felder basierend auf dem ausgewählten Tab anzeigt.

---

Formularfelder in ausklappbare Sektionen gruppieren

Der Editor unterstützt die Organisation von Feldern in ausklappbare Sektionen, was die Verwaltung langer Formulare erleichtert. Jede Sektion kann geöffnet oder geschlossen werden.

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";

   registerEditorItem("comments", Comments);

   const items = [
      {
        comp: "section",
        key: "common-section",
        label: "Common settings",
      },
      {
        comp: "text",
        key: "name",
        label: "Name",
      },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      {
        comp: "section",
        key: "comments-section",
        label: "Comments",
      },
      {
        comp: "comments",
        key: "comments",
        section: "comments-section",
      }
   ];
</script>

<Editor {items} />

Alle Felder werden innerhalb ausklappbarer Sektionen dargestellt.

Sektionen wie "Common settings" und "Comments" können ein- oder ausgeklappt werden, sodass Benutzer sich auf bestimmte Teile des Formulars konzentrieren können.

---

Accordion-ähnliche Sektionen anzeigen

Accordion-Sektionen erlauben es, jeweils nur eine Sektion gleichzeitig geöffnet zu haben. Wenn eine neue Sektion geöffnet wird, wird die zuvor geöffnete Sektion automatisch geschlossen.

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";

   registerEditorItem("comments", Comments);

   const items = [
      {
        comp: "section",
        key: "common-section",
        label: "Common settings",
        sectionMode: "accordion",
      },
      {
        comp: "text",
        key: "name",
        label: "Name",
      },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      {
        comp: "section",
        key: "comments-section",
        label: "Comments",
        sectionMode: "accordion",
      },
      {
        comp: "comments",
        key: "comments",
        section: "comments-section",
      }
   ];
</script>

<Editor {items} />

Alle Felder werden innerhalb ausklappbarer Sektionen dargestellt, jedoch kann jeweils nur eine Sektion geöffnet sein.

Diese Konfiguration eignet sich für Formulare, bei denen jeweils nur die Informationen einer Sektion angezeigt werden sollen.

Modal-ähnliche Sektionen im Editor verwenden

Modal-Sektionen blenden andere Felder aus, wenn sie geöffnet werden, und ersetzen die übergeordneten Felder durch den Inhalt der ausgewählten Sektion. Dies ist nützlich, um den Fokus auf eine bestimmte Gruppe von Eingaben zu lenken.

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";

   registerEditorItem("comments", Comments);

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name",
      },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      {
        comp: "section",
        key: "comments-section",
        label: "Comments",
        sectionMode: "exclusive",
      },
      {
        comp: "comments",
        key: "comments",
        section: "comments-section",
      }
   ];
</script>

Felder in Sektionen sind standardmäßig ausgeblendet. Ein Klick auf eine Sektion ersetzt die übergeordneten Felder durch den Inhalt der Sektion.

<Editor {items} />

Dieser Ansatz eignet sich ideal für Formulare, bei denen Sektionen den vollen Fokus erhalten sollen, um Ablenkungen durch andere Felder zu reduzieren.

Felder und Sektionen im Editor kombinieren

Der Editor ermöglicht die Kombination von dauerhaft sichtbaren Feldern mit ausklappbaren Sektionen. Dies ist nützlich, wenn bestimmte Felder jederzeit zugänglich bleiben müssen.

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";

   registerEditorItem("comments", Comments);

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name",
      },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      {
        comp: "section",
        key: "comments-section",
        label: "Comments",
      },
      {
        comp: "comments",
        key: "comments",
        section: "comments-section",
      }
   ];
</script>

Während die Felder `name` und `descr` immer sichtbar sind, werden darunter liegende Felder innerhalb einer ausklappbaren Sektion dargestellt.

<Editor {items} />

Diese Konfiguration eignet sich für Formulare, bei denen bestimmte wichtige Felder immer zugänglich bleiben müssen, während andere in ausklappbaren Sektionen gruppiert werden können.

Zugehöriges Beispiel: Layouts