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.
Sie können das allgemeine Erscheinungsbild und den Stil eines adaptiven Formulars definieren, indem Sie mit dem Design-Editor Stile definieren. Außerdem können Sie Inline-CSS-Stile auf einzelne Komponenten eines adaptiven Formulars 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
Hinzufügen von Inline-Stilen zu einer Komponente:
-
Öffnen Sie das Formular im Formulareditor und ändern Sie den Modus in den Stilmodus. Um den Stilmodus zu aktivieren, wählen Sie in der Symbolleiste der Seite auf
-
Wählen Sie eine Komponente auf der Seite und die Schaltfläche „Bearbeiten“
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.
Sie können auch Komponenten in der Seitenleiste auswählen. 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 Optionsfelder 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.
-
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)
-
Ebenso können Sie Stile auf andere Teile einer Komponente wie Widget, Beschriftung und Hilfe anwenden.
-
Wählen Sie Fertig aus, um die Änderungen zu bestätigen, oder wählen Sie Abbrechen aus, 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-Stil-Eigenschaften
Beachten Sie die Änderung im Textfeldstil in der folgenden Abbildung, nachdem die folgenden CSS-Eigenschaften angewendet wurden.
Textfeldkomponente nach der Anwendung der Inline-Stil-Eigenschaften.
Wenn Sie den obigen Schritten folgen, können Sie andere Komponenten wie Bereiche, Sendenfelder und Optionsfelder auswählen und formatieren.