Zum Hauptinhalt springen

Toolbar konfigurieren

Toolbar-Konfiguration​

Das Editor-Widget ermöglicht das Hinzufügen und Anpassen von Toolbars. Toolbars können oben oder unten im Editor positioniert werden und interaktive Elemente wie Buttons, Labels und Menüs enthalten. Diese Toolbars verbessern die Benutzerinteraktion und bieten schnellen Zugriff auf bestimmte Aktionen oder Informationen.

Eine obere Toolbar zum Editor hinzufügen​

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

  const topBar = {
    items: [
      { comp: "spacer" },
      { comp: "button", text: "Click me", onclick: () => alert("clicked") },
    ],
  };
</script>

<Editor {topBar} />

Diese Konfiguration fügt dem Editor eine obere Toolbar hinzu. Die Toolbar enthält einen Spacer zur Layout-Anpassung und einen Button mit der Beschriftung „Click me". Beim Klick auf den Button wird eine Alert-Meldung ausgelöst. Diese Einrichtung eignet sich dafür, wichtige Aktionen oder Steuerelemente oben im Editor für einen einfachen Zugriff zu platzieren.

topbar

Eine untere Toolbar zum Editor hinzufügen​

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

  const bottomBar = {
    items: [
      { comp: "spacer" },
      { comp: "button", text: "Click me", handler: () => alert("clicked") },
    ],
  };
</script>

<Editor {bottomBar} />

Diese Konfiguration erstellt eine untere Toolbar im Editor. Ähnlich wie die obere Toolbar enthält sie einen Spacer und einen Button mit der Beschriftung „Click me", der beim Klicken eine Alert-Meldung auslöst. Dieses Layout wird häufig für Aktionen oder Einstellungen verwendet, die weniger kritisch sind, aber dennoch leicht erreichbar sein müssen.

Eine obere Toolbar mit Formularwerten hinzufügen​

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

  const topBar = {
    items: [
      { comp: "label", spacer: true, key: "label" },
      { comp: Switch, key: "state" },
    ],
  };

  const values = {
    label: "Product N1",
    state: false
  };
</script>

<Editor {topBar} {values} />

Diese Konfiguration fügt eine obere Toolbar hinzu, die Formularwerte dynamisch zur Befüllung ihrer Elemente verwendet. Ein Label zeigt den Wert des Schlüssels „label" an, und ein Switch schaltet den Wert des Schlüssels „state" um. Diese Konfiguration eignet sich ideal dazu, Einstellungen oder Metadaten direkt in der Toolbar anzuzeigen und anzupassen.

toolbar_values

Ein Aktionsmenü in der Toolbar erstellen​

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

  const topBar={
    items: [
      {
        comp: "label",
        spacer: true,
        text: "Item X12-A",
      },
      { comp: "separator" },
      {
        icon: "wxi-dots-v",
        collapsed: true,
        layout: "column",
        items: [
          {
           id: "done",
           comp: "item",
           text: "Mark as done",
           handler: buttonClick,
          },
          {
           id: "delete",
           comp: "button",
           type: "danger",
           text: "Delete the item",
           handler: buttonClick,
          },
        ],
      },
    ]
  };
</script>

<Editor {topBar} />

Diese Konfiguration fügt der oberen Toolbar ein Aktionsmenü hinzu. Das Menü besteht aus einem beschrifteten Element, einem Separator und einem per Icon aktivierten Dropdown-Menü. Das Dropdown enthält Optionen wie „Mark as done" und „Delete the item", jeweils mit einer zugehörigen Handler-Funktion. Dies ist besonders nützlich, um kontextbezogene Aktionen zum Inhalt oder Zustand des Editors bereitzustellen, ohne die Toolbar zu überladen.

actionmenu

Verwandtes Beispiel: Toolbar values