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-Stile überschreiben die Formatierung, die im Design bereitgestellt wird.

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. Um den Stilmodus zu aktivieren, tippen Sie in der Symbolleiste der Seite auf ](assets/canvas-drop-down.png)Arbeitsfläche-Dropdown![ > Stil.

  2. Wählen Sie eine Komponente auf der Seite aus und tippen Sie auf die Schaltfläche „Bearbeiten“ Bearbeiten-Schaltfläche. 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 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 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 (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. Tippen Sie auf Fertig, um die Änderungen zu bestätigen, oder auf Abbrechen, um die Änderungen zu verwerfen.

Beispiel: Inline-Formatvorlagen für eine Feldkomponente

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, 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

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

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.

HINWEIS

Designeigenschaften variieren je nach ausgewählter Komponente.

Auf dieser Seite