Eigene Anzeigevarianten

Zuletzt geändert am:

Dieser Artikel zeigt, wie Sie Anzeigevarianten in Formcentric nutzen und individuell erweitern. Sie erfahren, wie Sie vordefinierte Klassen einsetzen sowie eigene Varianten definieren und diese über CSS oder Templates in das gewünschte Erscheinungsbild integrieren.

Anzeigevarianten verwenden

Viele Themes unterstützen Anzeigevarianten über Klassen, die aus der Editor-Konfiguration in das Markup übernommen werden.

Wichtige Grundregeln:

  1. style_class ist für zusätzliche CSS-Klassen gedacht.
  2. field_width ist eine eigene Eigenschaft und sollte für Breitenklassen verwendet werden.
  3. Komma-separierte Klassen aus dem Editor werden zur Laufzeit zu Leerzeichen normalisiert.


Häufige Beispiele aus den mitgelieferten Themes:

  1. mwf-s, mwf-m, mwf-l für Feldbreiten
  2. mwf-separator für Trennvarianten in unterstützten Themes
  3. fc-file__dashboard--inline und fc-file__dashboard--modal für File-Upload-Anzeigevarianten

Eigene Anzeigevarianten erstellen und verwenden

Wenn Sie eigene Anzeigevarianten verwenden möchten, benötigen Sie drei Dinge:

  1. eine Klasse oder Variantenzuordnung im Editor
  2. ein Theme oder CSS, das diese Klasse tatsächlich auswertet
  3. gegebenenfalls Templates, die style_class an das passende DOM-Element weiterreichen


CSS-Klasse im Editor definieren

Legen Sie im Editor oder in Ihrer Feldkonfiguration eine Klasse fest, zum Beispiel:

  1. my-highlight
  2. my-compact
  3. fc-file__dashboard--modal


CSS-Datei erstellen und einbinden

Schritt 1: CSS-Datei erstellen

Schritt 2: CSS-Datei in HTML oder Build einbinden

  1. klassisch per <link>
  2. im Framework über den normalen CSS- oder SCSS-Import
  3. im Theme direkt in den entsprechenden Partial-Dateien

Schritt 3: CSS-Regeln definieren

Arbeiten Sie möglichst gegen stabile Theme- oder Wrapper-Klassen und nicht gegen zufällige DOM-Tiefen.


Spezifische Elemente gezielt anpassen

Für präzisere Anpassungen empfiehlt sich:

  1. Entwicklertools des Browsers öffnen
  2. das tatsächlich gerenderte Element und seine Klassen prüfen
  3. auswerten, ob die Klasse auf dem äußeren Feldcontainer oder auf einem inneren Wrapper landet
  4. CSS erst danach gezielt formulieren

Besonders bei File Uploads oder komplexeren Feldern sollten Sie prüfen, welches Element im Template die style_class erhält.

Feedback

ISO/IEC 27001 Icon
IT-Mittelstand Software Hosted in Germany
IT-Mittelstand Software Made in Germany