Eingabesteuerelemente rendern

Felddarstellung

Das Editor-Widget bietet Funktionen zum Rendern verschiedener Eingabesteuerelemente. Dazu gehören grundlegende Eingabetypen, erweiterte Komponenten sowie spezialisierte Widgets wie Kommentare und Aufgabenlisten. Jedes Steuerelement lässt sich mit Labels, Keys und zusätzlichen Eigenschaften an spezifische Anwendungsfälle anpassen.

ColorSelect-Steuerelement im Editor rendern

Importieren Sie das ColorSelect-Steuerelement aus @svar-ui/svelte-core und registrieren Sie es als Editor-Element:

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

  registerEditorItem("colorselect", ColorSelect);

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

<Editor {items} />

Das Farbauswahl-Steuerelement ermöglicht es Benutzern, eine Farbe über eine grafische Oberfläche auszuwählen. Es eignet sich ideal für Szenarien, in denen Benutzer eine Farbe festlegen müssen, beispielsweise zur Anpassung von Themes oder zur Farbzuweisung bei Kategorien.

DatePicker-Steuerelement im Editor rendern

Importieren Sie das DatePicker-Steuerelement aus @svar-ui/svelte-core und registrieren Sie es als Editor-Element:

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

  registerEditorItem("datepicker", DatePicker);

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

<Editor {items} />

Das Datumsauswahl-Steuerelement ermöglicht es Benutzern, ein Datum aus einer Kalenderoberfläche auszuwählen. Es ist nützlich für Szenarien wie Terminplanung, Deadline-Verwaltung oder andere datumsbasierte Eingaben.

Radio Buttons im Editor rendern

Importieren Sie das RadioButtonGroup-Steuerelement aus @svar-ui/svelte-core und registrieren Sie es als Editor-Element:

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

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

Radio Buttons werden verwendet, um Benutzern mehrere Optionen zu präsentieren, von denen nur eine ausgewählt werden kann. Sie eignen sich für Szenarien wie die Auswahl von Einstellungen oder Kategorien.

Schreibgeschützten Block im Editor rendern

Dies ist ein integriertes Steuerelement, das keine zusätzliche Registrierung erfordert.

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

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

<Editor {items} />

Der schreibgeschützte Block dient zur Anzeige statischer Informationen, die nicht bearbeitet werden können. Er ist nützlich für die Darstellung vordefinierter oder systemgenerierter Daten.

RichSelect-Steuerelement im Editor rendern

Importieren Sie das RichSelect-Steuerelement aus @svar-ui/svelte-core und registrieren Sie es als Editor-Element:

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

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

Das RichSelect-Steuerelement ermöglicht es Benutzern, aus einer Liste von Optionen auszuwählen, wobei zusätzliche Eigenschaften wie Farben oder Icons die Visualisierung verbessern. Es eignet sich ideal für die Priorisierung oder Kategorisierung.

Slider-Steuerelement im Editor rendern

Importieren Sie das Slider-Steuerelement aus @svar-ui/svelte-core und registrieren Sie es als Editor-Element:

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

  registerEditorItem("slider", Slider);

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

<Editor {items} />

Das Slider-Steuerelement wird zur Auswahl eines Wertes innerhalb eines vordefinierten Bereichs verwendet. Es wird häufig für Einstellungen wie Lautstärke, Helligkeit oder Bewertungssysteme eingesetzt.

Bearbeitbares Text-Steuerelement im Editor rendern

Dies ist ein integriertes Steuerelement, das keine zusätzliche Registrierung erfordert.

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

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

<Editor {items} />

Das bearbeitbare Text-Steuerelement ist ein einfaches Eingabefeld für einzeiligen Text. Es eignet sich für einfache Dateneingaben wie Namen, Titel oder kurze Beschreibungen.

Textarea-Steuerelement im Editor rendern

Dies ist ein integriertes Steuerelement, das keine zusätzliche Registrierung erfordert.

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

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

<Editor {items} />

Das Textarea-Steuerelement stellt ein mehrzeiliges Eingabefeld für längere Texte bereit. Es eignet sich ideal für Kommentare, Beschreibungen oder Notizen.

Kommentare zum Editor hinzufügen

Importieren Sie das Comments-Widget aus @svar-ui/svelte-comments und registrieren Sie es als Editor-Element:

<script>
  import { Editor, registerEditorItem } from "@svar-ui/svelte-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} />

Das Comments-Widget ermöglicht es Benutzern, Kommentare im Editor hinzuzufügen, anzuzeigen und zu verwalten. Es ist nützlich für kollaborative Arbeitsabläufe oder Feedback-Systeme mit Benutzeridentifikation und Zeitstempeln.

Verwandtes Beispiel: Comments

Aufgabenliste zum Editor hinzufügen

Importieren Sie das TasList-Widget aus @svar-ui/svelte-tasklist und registrieren Sie es als Editor-Element:

<script>
  import { Editor, registerEditorItem } from "@svar-ui/svelte-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} />

Das Aufgabenlisten-Widget integriert Aufgabenverwaltungsfunktionen in den Editor. Es eignet sich zum Erstellen und Verfolgen von Aufgaben mit Feldern für Aufgabentitel und Statusaktualisierungen.

Verwandtes Beispiel: Tasklist