Durchsuchen Sie nach Kategorie
GrapesJS Stile
GrapesJS-Style-Manager-Plugins erweitern die visuelle Styling-Oberfläche um eigene CSS-Eigenschaften, Unterstützung für Design Tokens und fortgeschrittene Selektor-Steuerungen. Mit diesen Erweiterungen ergänzt du Farbwähler, Abstands-Editoren, Typografie-Steuerungen und CSS-Code-Editoren im Style-Panel von GrapesJS. Stöbere in kostenlosen und Premium-Styling-Erweiterungen, geprüft von der GrapesJS-Entwicklercommunity.
Über GrapesJS Stile
Der GrapesJS-Style-Manager ist das Panel, in dem Nutzer CSS-Eigenschaften auf ausgewählte Komponenten anwenden — Hintergrundfarben, Schriften, Abstände, Rahmen und Layout. Der Standard-Style-Manager enthält einen Satz gängiger CSS-Felder, gruppiert in Sektoren. Die Style-Manager-Plugins auf GJS.Market erweitern ihn um eigene Sektoren, fortgeschrittene Steuerungen und Designsystem-Integrationen. Plugins für eigene Sektoren ergänzen Eigenschaftsgruppen, die auf eine bestimmte Designsprache zugeschnitten sind: einen Motion-Sektor mit Transition- und Animationssteuerung, einen Grid-Sektor mit CSS-Grid-Eigenschaften oder einen Typografie-Sektor mit Zeilenhöhe, Laufweite und Font-Variant. Design-Token-Plugins verbinden den Style-Manager mit einer Token-Bibliothek — Figma-Tokens, Style-Dictionary-Ausgabe oder eine eigene JSON-Datei — sodass Farb- und Abstandsfelder benannte Tokens statt roher Hex-Werte anzeigen. CSS-Editor-Plugins ergänzen eine Rohcode-Ansicht neben dem visuellen Style-Manager. Fortgeschrittene Plugins binden Styles an Geräte-Breakpoints und zeigen unterschiedliche Werte für Desktop, Tablet und Mobil samt deutlicher Kennzeichnung des aktiven Breakpoints.
GrapesJS Stile — FAQ
- Was ist der GrapesJS-Style-Manager?
- Es ist das Panel, das CSS für die ausgewählte Komponente schreibt. Eigenschaften sind in Sektoren gruppiert — Typografie, Dekoration, Dimension, Flex — und jedes Feld bildet eine CSS-Eigenschaft ab. Der Manager setzt keine Inline-Styles: Er schreibt Regeln in den CSS-Composer des Editors, weshalb die Ausgabe ein echtes, exportierbares Stylesheet bleibt.
- Wie füge ich eine eigene Eigenschaft im Style-Manager hinzu?
- Konfiguriere styleManager.sectors beim Init oder rufe zur Laufzeit editor.StyleManager.addSector und addProperty auf. Jede Eigenschaft deklariert einen Namen, die CSS-Eigenschaft, die sie schreibt, und einen Typ — select, color, slider, composite oder stack. Verpacke mehrere Sektoren in ein Plugin, und du hast ein wiederverwendbares Panel passend zu deiner Designsprache.
- Warum wirken sich meine Style-Änderungen auf andere Elemente aus?
- Weil der Style-Manager die ausgewählte CSS-Regel anspricht, nicht das Element. Hat die Komponente eine Klasse, gelten Änderungen für diese Klasse und damit für jedes Element, das sie teilt. Wechsle im Selector Manager auf den eigenen id-Zustand der Komponente, um nur diese eine Instanz zu stylen — das ist mit Abstand die häufigste Verwirrungsquelle beim Styling in GrapesJS.
- Kann ich unterschiedliche Styles je Breakpoint haben?
- Ja. Die Breakpoints des Device-Managers und der Style-Manager sind gekoppelt: Wählst du Tablet oder Mobil, landen nachfolgende Änderungen in der Media Query dieses Geräts. Das exportierte CSS enthält echte Media Queries. Plugins dieser Kategorie ergänzen eine deutlichere Anzeige des aktiven Breakpoints, was das versehentliche Bearbeiten der Desktop-Styles verhindert.
- Kann der Style-Manager Design Tokens statt Hex-Werten nutzen?
- Standardmäßig nicht, aber Plugins dieser Kategorie ergänzen es. Sie binden Farb- und Abstandsfelder an eine Token-Quelle — Figma-Tokens, Style-Dictionary-Ausgabe oder eine eigene JSON-Datei — sodass Nutzer einen benannten Token wählen und das CSS die Variable statt eines rohen Werts erhält. Genau das hält die Editor-Ausgabe im Einklang mit einem bestehenden Designsystem.
Durchsuchen Sie nach Tag