Inline-Formatierung von Komponenten adaptiver Formulare inline-styling-of-adaptive-form-components

Adobe empfiehlt, die modernen und erweiterbaren Kernkomponentenzur Datenerfassung zu verwenden, um neue adaptive Formulare zu erstellenoder adaptive Formulare zu AEM Sites-Seiten hinzuzufügen. Diese Komponenten stellen einen bedeutenden Fortschritt bei der Erstellung adaptiver Formulare dar und sorgen für beeindruckende Anwendererlebnisse. In diesem Artikel wird der ältere Ansatz zum Erstellen adaptiver Formulare mithilfe von Foundation-Komponenten beschrieben.

Version
Artikel-Link
AEM 6.5
Hier klicken
AEM as a Cloud Service
Dieser Artikel

Sie können das allgemeine Erscheinungsbild und Design eines adaptiven Formulars definieren, indem Sie mit dem Design-Editor Stile definieren. Außerdem können Sie Inline-CSS-Stile auf einzelne Komponenten anwenden und die Änderungen direkt in der Vorschau anzeigen. Inline-Stile überschreiben die Formatierung, die im Design bereitgestellt wird.

Verwenden von Inline-CSS-Eigenschaften apply-inline-css-properties

So fügen Sie Inline-Stile zu einer Komponente hinzu:

  1. Öffnen Sie das Formular im Formulareditor und ändern Sie den Modus in den Stilmodus. Um den Stilmodus zu aktivieren, tippen Sie in der Symbolleiste der Seite auf ](assets/Smock_ChevronDown.svg)canvas-drop-down![ > Stil.

  2. Wählen Sie eine Komponente auf der Seite aus und wählen Sie die Schaltfläche „Bearbeiten“ edit-button . In der Seitenleiste geöffnete Stileigenschaften.

    Sie können auch Komponenten aus der Hierarchiestruktur in der Seitenleiste auswählen. Die Hierarchiestruktur für das Formular ist als „Formularobjekte“ in der Seitenleiste verfügbar.

    Im Modus Stil können Sie Komponenten sehen, die unter „Formularobjekte“ aufgeführt sind. Allerdings führt „Formularobjekte“ in der Seitenleiste Komponenten wie Felder und Bereiche auf. Felder und Bereiche sind generische Komponenten, die Komponenten wie Textfelder und Optionsschaltflächen enthalten können.

    Wenn Sie eine Komponente in der Seitenleiste auswählen, sehen Sie alle aufgelisteten Unterkomponenten sowie die Eigenschaften der ausgewählten Komponente. Sie können eine bestimmte Unterkomponente auswählen und formatieren.

  3. Klicken Sie auf eine Registerkarte in der Seitenleiste, um CSS-Eigenschaften festzulegen. Sie können Eigenschaften wie die folgenden angeben:

    • Abmessungen und Position (Anzeigeeinstellung, Auffüllung, Höhe, Breite, Ränder, Position, Z-Index, „Float“, „Clear“, Überlauf)
    • Text (Schriftfamilie, Stärke, Farbe, Größe, Zeilenhöhe und Ausrichtung)
    • Hintergrund (Bild und Verlauf, Hintergrundfarbe)
    • Rahmen (Breite, Stil, Farbe, Radius)
    • Effekte (Schatten, Deckkraft)
    • Erweitert (Ermöglicht das Schreiben benutzerdefinierten CSS für die Komponente)
  4. Ebenso können Sie Stile auf andere Teile einer Komponente wie Widget, Beschriftung und Hilfe anwenden.

  5. Wählen Sie Fertig, um die Änderungen zu bestätigen, oder Abbrechen, um die Änderungen zu verwerfen.

Beispiel: Inline-Formatvorlagen für eine Feldkomponente example-inline-styles-for-a-field-component

Die folgenden Bilder zeigen ein Textfeld, bevor und nachdem Inline-Stile darauf angewendet wurden.

Textfeldkomponente vor der Anwendung von Inline-Formatierung

Textfeldkomponente vor der Anwendung von Inline-Stil-Eigenschaften

Beachten Sie die Änderung im Textfeldstil in der folgenden Abbildung, nachdem die folgenden CSS-Eigenschaften angewendet wurden.

Selektor
CSS-Eigenschaft
Wert
Ergebnis
Feld
border

Border width =2px

Border style=Solid

Border color=#1111

Erstellt einen schwarzen, 2 Pixel breiten Rahmen um das Feld
Textfeld
background-color
#6495ED

Ändert die Hintergrundfarbe zu Kornblumenblau (#6495ED)

Hinweis: Sie können einen Farbnamen oder den zugehörigen Hexadezimalcode im Wertefeld angeben.

Bezeichnung
Abmessungen und Position > Breite
100 px
Stellt die Breite für die Beschriftung auf 100 px ein
Feldhilfesymbol
Text > Schriftfarbe
#2ECC40
Ändert die Farbe des Hilfesymbols.
Lange Beschreibung
text-align
center
Richtet die Langbeschreibung für die Hilfe mittig aus

Textfelddesign nach der Anwendung von Inline-Formatierung

Textfeldkomponente nach der Anwendung der Inline-Stil-Eigenschaften

Wenn Sie den obigen Schritten folgen, können Sie andere Komponenten wie Bereiche, Sendeschaltflächen und Optionsschaltflächen auswählen und formatieren.

NOTE
Designeigenschaften variieren je nach ausgewählter Komponente.

Kopieren und Einfügen von Stilen copy-paste-styles

Sie können einen Stil auch von einer Komponente kopieren und in eine andere Komponente in einem adaptiven Formular einfügen. Wählen Sie im Modus Stil die entsprechende Komponente und dann das Symbol „Kopieren“ Kopieren .

Wählen Sie die andere Komponente desselben Typs und dann das Symbol „Einfügen“ Einfügen , um den kopierten Stil einzufügen. Sie können auch auf das Symbol „Stil entfernen“ Stil entfernen auswählen, um den angewendeten Stil zu entfernen.

Stile für verschiedene Zustände einer Komponente festlegen set-styles-for-states

Sie können Stile für verschiedene Statuszustände eines Komponententyps festlegen. Zu den verschiedenen Statuszuständen gehören: Fokus, Deaktiviert, Mausberührung, Fehler, Erfolg und Obligatorisch.

So definieren Sie die Formatierung für einen Status einer Komponente:

  1. Wählen Sie im Modus Stil die Komponente und wählen Sie das Symbol „Bearbeiten“ Bearbeiten .

  2. Wählen Sie mit der Dropdownliste Status den Status der Komponente aus.

    Status auswählen

  3. Definieren Sie die Formatierung für den ausgewählten Status der Komponente und wählen Sie Speichern , um die Eigenschaften zu speichern.

Sie können die Statuszustände „Erfolg“ und „Fehler“ auch simulieren. Wählen Sie das Symbol „Erweitern“, um die Optionen Erfolg simulieren und Fehler simulieren anzuzeigen.

Status simulieren

Siehe auch see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab