Zum Hauptinhalt springen

Erste Schritte

Erste Schritte​

Um mit dem Widget zu beginnen, fügen Sie die erforderlichen Pakete zum Projekt hinzu.

npm install @svar-ui/svelte-core
npm install @svar-ui/svelte-editor

oder

yarn add @svar-ui/svelte-core
yarn add @svar-ui/svelte-editor
note

Das Paket wurde von wx-svelte-editor zu @svar-ui/svelte-editor migriert. Wir veröffentlichen wx-svelte-editor weiterhin bis zum Svelte SVAR 3.0-Update

Importieren Sie das Widget in das Projekt.

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

<Willow>
  <Editor />
</Willow>

Die Willow-Komponente dient als Standard-Theme-Wrapper, der die notwendigen Styles für alle SVAR-Widgets hinzufügt. Die Editor-Komponente kann ohne sie funktionieren, jedoch fehlen dann die Styles, sodass diese manuell hinzugefügt werden müssen. Es wird empfohlen, das Willow-Tag auf der obersten Ebene der Anwendung einzubinden.

Vollständiger Initialisierungscode​

Um das Widget in Aktion zu sehen, fügen Sie einige Elemente zum Widget hinzu.

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

  const items = [
    { comp: "text", key: "name", label: "Name" },
    { comp: "text", key: "descr", label: "Description" },
    { comp: "text", key: "role", label: "Role" }
  ];

  const values = {
    name: "John Doe",
    descr: "Lorem ipsum dolor sit amet",
    role: "admin"
  };
</script>

<Willow>
  <Editor {items} {values} />
</Willow>
hinweis

Um eine korrekte Initialisierung zu gewährleisten, wird empfohlen, ein Theme auf der obersten Ebene Ihrer Anwendung anzuwenden. Wenn Sie die Editor-Komponente eigenständig verwenden, vergessen Sie nicht, sie in ein Theme einzubetten (im obigen Beispiel wird das Willow-Theme verwendet).

Verwandte Artikel: