Show Menu
THEMEN×

Inline-Stile für Komponenten adaptiver Formulare

Sie können die Darstellung und das Design eines adaptiven Formulars definieren, indem Sie die Stile mithilfe des Designs mithilfe des Designeditors angeben. Außerdem können Sie Inline-CSS-Stile auf einzelne Komponenten anwenden und die Änderungen direkt in der Vorschau anzeigen. Inline-Formatvorlagen überschreiben die Formatierung, die im Design bereitgestellt werden.

Verwenden von Inline-CSS-Eigenschaften

Hinzufügen von Inline-Stilen zu einer Komponente:
  1. Öffnen Sie das Formular im Formular-Editor und ändern Sie den Modus in Stilmodus. To change the mode to styling mode, in the page toolbar, tap > Style .
  2. Select a component in the page, and tap the edit button . In der Randleiste 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.
    Sie können auch Komponenten in der Seitenleiste auswählen. Im Formatierungsmodus 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 aus 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 Randleiste, 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 (hier können Sie benutzerdefinierte CSS für die Komponente verwenden)
  4. Ebenso können Sie Designs für andere Teile einer Komponente wie Widgets, Beschriftung und Hilfe anwenden.
  5. Tap Done to confirm the changes or Cancel to discard the changes.

Beispiel: Inline-Stile für eine Feldkomponente

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.
Selektor
CSS-Eigenschaft
Wert
Ergebnis
Feld
border
Border width =2px
Border style=Solid
Border color=#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.
Etikett
Abmessungen & Position > width
100px
Stellt die Breite als 100px für die Beschriftung ein
Feld Hilfe Symbol Text > Schriftfarbe #2ECC40 Ändert die Farbe des Hilfesymbols.
Lange Beschreibung
text-align
center
Richtet die Langbeschreibung für die Hilfe mittig aus
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.
Designeigenschaften variieren je nach ausgewählter Komponente.