Inline-Stile für 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 as a Cloud Service
Hier klicken
AEM 6.5
Dieser Artikel

Sie können das Erscheinungsbild und den Stil eines adaptiven Formulars definieren, indem Sie Stile angeben, indem Sie Design-Editor. Außerdem können Sie Inline-CSS-Stile auf einzelne adaptive Formularkomponenten anwenden und die Änderungen sofort in der Vorschau anzeigen. Inline-Stile überschreiben die Formatierung, die im Design bereitgestellt wird.

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

Hinzufügen von Inline-Stilen zu einer Komponente:

  1. Öffnen Sie das Formular im Formular-Editor und ändern Sie den Modus in den Formatierungsmodus. Um den Stilmodus zu ändern, wählen Sie in der Seitensymbolleiste die Option Arbeitsfläche-Dropdown > Stil.

  2. Wählen Sie eine Komponente auf der Seite aus und klicken Sie auf die Schaltfläche "Bearbeiten" edit-button . Die Stileigenschaften werden in der Seitenleiste geöffnet.

    Sie können auch Komponenten aus der Formularhierarchie in der Seitenleiste auswählen. Die Hierarchie des Formulars ist als Formularobjekte in der Seitenleiste verfügbar.

    Sie können auch eine Komponente in der Seitenleiste auswählen. Im Modus Stil können Sie Komponenten sehen, die unter „Formularobjekte“ aufgeführt sind. Die Liste "Formularobjekte"in der Seitenleiste listet jedoch Komponenten wie Felder und Bereiche auf. Felder und Bedienfelder sind allgemeine Komponenten, die Komponenten wie Textfelder und Optionsfelder enthalten können.

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

  3. Klicken Sie auf eine Registerkarte in der Seitenleiste, um CSS-Eigenschaften anzugeben. 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. Auswählen Fertig zur Bestätigung der Änderungen 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 dem Anwenden von Inline-Stil-Eigenschaften

Beachten Sie die Änderung des Textfeldstils, die in der folgenden Abbildung gezeigt wird, nachdem die folgenden CSS-Eigenschaften angewendet wurden.

Selektor
CSS-Eigenschaft
Wert
Ergebnis
Feld
border

Border width =2px

Border style=Solid

Rahmenfarbe=#1111

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

Ändert die Hintergrundfarbe zu Kornblumenblau (#6495ED)

Hinweis: Sie können einen Farbnamen oder seinen Hexadezimalcode im Wertefeld angeben.

Bezeichnung
Dimensionen und Position > Breite
100 px
Stellt die Breite für die Beschriftung auf 100 px ein
Feld Hilfe Symbol
Text > Schriftfarbe
#2ECC40
Ändert die Farbe des Hilfesymbol-Gesichts.
Lange Beschreibung
text-align
Zentriert
Richtet die lange Beschreibung der Hilfe zentriert aus

Textfelddesign nach der Anwendung von Inline-Formatierung

Textfeldkomponente nach dem Anwenden von Inline-Stileigenschaften

Mit den oben beschriebenen Schritten können Sie andere Komponenten wie Bedienfelder, Senden-Schaltflächen und Optionsfelder auswählen und formatieren.

NOTE
Designeigenschaften variieren je nach ausgewählter Komponente.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2