Zum Hauptinhalt springen

Styling

Sie können das Erscheinungsbild der Editor-Komponenten durch das Anwenden spezifischer Styles anpassen.

Eine CSS-Klasse für den Editor-Container definieren​

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

<Editor css="myBox" />

Diese Funktion ermöglicht es, dem Haupt-Container-Element des Editors eine CSS-Klasse zuzuweisen. Das css-Attribut kann verwendet werden, um benutzerdefinierte Styles auf den Editor-Container anzuwenden, sodass Entwickler das visuelle Design an das Theme oder Layout der Anwendung anpassen können.

In diesem Beispiel sollte die CSS-Klasse myBox im Stylesheet vordefiniert sein. Dies ist hilfreich, wenn der Editor optisch zu den umgebenden UI-Elementen passen oder besondere visuelle Merkmale aufweisen soll, wie z. B. bestimmte Abstände, Rahmen oder Hintergrundfarben.

Schriftarten deaktivieren​

Wenn Sie die in einem Theme verwendeten Schriftarten deaktivieren möchten, können Sie die fonts-Eigenschaft des Themes verwenden und sie auf den Wert false setzen:

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

<div style="width:300px">
  <Willow fonts={false}>
    <Editor />
  </Willow>
</div>
Bitte beachten

Wenn Sie die Standardschriftarten deaktivieren, müssen Sie die benötigten Schriftarten selbst einbinden.

Verwandte Artikel: Visuelle Themes