Zum Hauptinhalt springen

Editor Widget

Erste Schritte​

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

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

oder

yarn add @svar-ui/react-core
yarn add @svar-ui/react-editor

Importieren Sie das Widget in das Projekt. Um sicherzustellen, dass alle Elemente korrekt angezeigt werden, sollten Sie auch das Theme und die Styles importieren.

import { Willow } from '@svar-ui/react-core'; //import the theme
import { Editor } from '@svar-ui/react-editor';
import "@svar-ui/react-editor/all.css"; //import styles

export default function App() {
  return (
    <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.

import { Willow } from '@svar-ui/react-core';
import { Editor } from '@svar-ui/react-editor';
import "@svar-ui/react-editor/all.css";

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"
};

export default function App() {
  return (
    <Willow>
      <Editor items={items} values={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: