Zum Hauptinhalt springen

items

Beschreibung​

Optional. Definiert die Komponenten, die im Editor gerendert werden sollen

Verwendung​

items?: {
   comp?: string | Component;
   key?: string;
   label?: string;
   labelTemplate?: (value: any) => string;
   column?: "right" | "left";
   batch?: string | number;
   hidden?: boolean;
   section?: string;
   sectionMode?: "accordion" | "exclusive";
   activeSection?: boolean;
   options?: {
      id?: string | number;
      label?: string;
      [key: string]: any;
   }[];
   required?: boolean;
   validation?: (value: any) => boolean;
   validationMessage?: string;
   config?: {
      [key: string]: any;
   };
   [key: string]: any;
	}[];

Parameter​

  • comp – (erforderlich) gibt den Komponententyp an (z. B. "text", "textarea", "select") oder eine Svelte-Komponente. Wird die Komponente nicht gefunden oder nicht angegeben, wird "text" verwendet.
  • key – (erforderlich) eindeutiger Schlüssel, der das Element an eine Eigenschaft im values-Objekt des Editors bindet
  • label – (optional) Textbeschriftung, die neben dem Steuerelement angezeigt wird
  • labelTemplate – (optional) Funktion, die basierend auf dem aktuellen Wert eine benutzerdefinierte Beschriftung zurückgibt
  • column – (optional) legt fest, in welcher Spalte das Steuerelement gerendert wird: "left" | "right"
  • batch – (optional) gruppiert Elemente für gemeinsames Rendern oder gemeinsame Verarbeitung
  • hidden – (optional) wenn true, wird das Element nicht gerendert
  • section – (optional) weist das Element einem benannten Abschnitt zu
  • sectionMode – (optional) definiert das Verhalten einklappbarer Abschnitte:
    • "accordion" – mehrere Abschnitte können gleichzeitig geöffnet bleiben
    • "exclusive" – nur ein Abschnitt kann gleichzeitig geöffnet bleiben
  • activeSection – (optional) wenn true, wird der Abschnitt standardmäßig aufgeklappt
  • options – (optional) definiert die Liste der verfügbaren Optionen. Wird von Komponenten wie select, radio usw. verwendet.
  • required – (optional) markiert das Feld als Pflichtfeld
  • validation – (optional) benutzerdefinierte Validierungsfunktion. Muss true für gültige Werte und false andernfalls zurückgeben
  • validationMessage – (optional) Meldung, die bei fehlgeschlagener Validierung angezeigt wird
  • config – (optional) beliebiges Konfigurationsobjekt, das direkt an die Komponente übergeben wird
  • [key: string] – (optional) ermöglicht das Anhängen zusätzlicher Attribute oder Eigenschaften an das Editor-Element

Beispiele​

Rendern eines bearbeitbaren Textelements in einem Editor​

<script>
   import { Editor } from "@svar-ui/react-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

Rendern eines Nur-Lesen-Blocks in einem Editor​

<script>
   import { Editor } from "@svar-ui/react-editor";

   const items = [
      {
        comp: "readonly",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

Rendern von Optionsfeldern in einem Editor​

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

   registerEditorItem("radio-group", RadioButtonGroup);

   const items = [
      {
        comp: "radio-group",
        key: "name",
        label: "Name",
        options: [
           {
              value: "s",
              label: "Scorpions",
           },
           {
              value: "m",
              label: "Muse",
           },
        ]
      }
   ];
</script>

<Editor {items} />

Rendern eines Textarea-Steuerelements in einem Editor​

<script>
   import { Editor } from "@svar-ui/react-editor";

   registerEditorItem("textarea", TextArea);

   const items = [
      {
        comp: "textarea",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

Rendern eines Slider-Steuerelements in einem Editor​

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

   registerEditorItem("slider", Slider);

   const items = [
      {
        comp: "slider",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

Rendern eines Rich-Select-Steuerelements in einem Editor​

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

   registerEditorItem("select", RichSelect);

   const items = [
      {
        comp: "select",
        key: "name",
        label: "Name",
        options: [
           { id: 1, label: "High", color: "#DF282F" },
           { id: 2, label: "Medium", color: "#FFC975" },
           { id: 3, label: "Low", color: "#65D3B3" },
        ]
      }
   ];
</script>

<Editor {items} />

Rendern eines Datumsauswahl-Steuerelements in einem Editor​

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

   registerEditorItem("datepicker", DatePicker);

   const items = [
      {
        comp: "datepicker",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

Rendern eines Farbauswahl-Steuerelements in einem Editor​

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

   registerEditorItem("colorselect", ColorSelect);

   const items = [
      {
        comp: "colorselect",
        key: "name",
        label: "Name"
      }
   ];
</script>

<Editor {items} />

Kommentare zum Editor hinzufügen​

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

   registerEditorItem("comments", Comments);

   const users = [
      {
        id: 1,
        name: "John Doe",
        avatar: "https://via.placeholder.com/150",
      },
   ];

   const items = [
      {
        comp: "comments",
        key: "comments",
        label: "Comments",
        users,
        activeUser: 1,
      },

   ];

   const data = {
      comments: [
        {
           id: 1,
           user: 1,
           content: "Greetings, fellow colleagues.",
           date: new Date(),
        },
      ],
   }
</script>

<Editor {items} values={data} />

Aufgabenliste zum Editor hinzufügen​

<script>
   import { Editor, registerEditorItem } from "@svar-ui/react-editor";
   import { TaskList } from "@svar-ui/svelte-tasklist";

   registerEditorItem("tasks", Tasklist);
   const items = [
      {
        comp: "tasks",
        key: "task",
        label: "Task",
      },
   ];

   const data = {
      task: [
        {
           id: 1,
           title: "Task 1",
           status: 1,
        },
      ],
   }
</script>

<Editor {items} values={data} />

Formular in Abschnitte aufteilen​

<script>
   import { Editor, registerEditorItem } from "@svar-ui/react-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 einklappbarer Abschnitte gerendert.

Feld als Pflichtfeld markieren​

<script>
   import { Editor } from "@svar-ui/react-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        required: true,
      },
   ];
</script>

<Editor {items} />

Dieses Beispiel zeigt, wie das Feld name im Editor als Pflichtfeld markiert wird.

Validierungsregel für ein Feld definieren​

<script>
   import { Editor } from "@svar-ui/react-editor";

   const items = [
      { comp: "text", key: "name", label: "Name",
        validation: val => {
          const regEx = /^[a-zA-Z]+$/;
           return val && regEx.test(val);
        },
        validationMessage: "wrong name format"
      }
   ];
</script>

<Editor {items} />

Dieses Beispiel definiert eine Validierungsregel für das Feld "Name", die erfordert, dass die Eingabe einem bestimmten regulären Ausdruck entspricht. Stimmt die Eingabe nicht überein, wird die Validierungsmeldung "wrong name format" angezeigt.