Show Menu
THEMEN×

Stilkonstrukte für adaptive Formulare

Voraussetzungen

Kenntnisse im Umgang mit CSS und von LESS-Framework.

Was angepasst werden kann

Der Artikel listet öffentlich verfügbare CSS-Klassen von adaptiven Formularen. Sie können diese Klassen nutzen, um verschiedene Komponenten eines adaptiven Formulars zu formatieren. Der Stil von Authoring-Komponenten, wie Dialogfelder und Statusleisten, die Warnungen anzeigen, gehen über den Rahmen dieses Artikels hinaus. Verwenden Sie diese Stilkonstrukte, um Stile (mit CSS oder früher) nur dann zu erstellen, wenn Sie mit dem Design- Editor keine Komponenten formatieren können.

Anpassen von Stilen in adaptiven Formularen

Das LESS-Framework vereinfacht das Anwendungsbeispiel, um Stile in adaptiven Formularen anzupassen. Mit dem Framework können Sie Stile mit einem Set von Variablen und Funktionen (mixins) definieren. Mit dem LESS-Framework können Sie die Größe des enthaltenen Codes reduzieren und dessen Wiederverwendbarkeit verbessern.
Sie können adaptive Formularstile wie folgt anpassen:
  • Design ändern
  • Ändern Sie den Stil der Komponente

Designänderung

Sie können das Design eines adaptiven Formulars ändern, um sicherzustellen, dass sein Erscheinungsbild mit den Webseiten konsistent ist, in denen das adaptive Formular eingebettet ist.
Änderungen des Gesamtaussehens des adaptiven Formulars mithilfe von CSS-Eigenschaften sind in der Regel Teil der Designänderungen. Wesentliche Änderungen am lo "ok and sense of the adaptive form", wie Änderungen im Layout und der Platzierung von Komponenten, werden nicht als Designänderungen betrachtet.
Basierend auf dem Bootstrap, definiert der folgende Satz von CSS-Eigenschaften das Design einer Webseite:
  • Hintergrundfarbe
  • Rahmen (Typ, Farbe, Stärke)
  • Schriftfarbe
  • Erweiterte Umrandung
  • Marge
  • Schriftgrad
  • LineHeight
Derzeit sind LESS-Variablen nur für diese Eigenschaften der verschiedenen Elemente in einem adaptiven Formular definiert.

Änderung des Komponentenstils

Sie können Änderungen an Aussehen, Layout, Positionierung und Sichtbarkeit von Elementen vornehmen. Um diese Aufgabe zu erreichen, erstellen oder aktualisieren Sie Ihre benutzerdefinierten .css-Dateien, um die in diesem Artikel aufgeführten Stilkonstrukte einzuschließen.
Um ein Design auf ein adaptives Formular anzuwenden, öffnen Sie das adaptive Formular zum Bearbeiten, öffnen Sie den Container mit den Eigenschaften des adaptiven Formulars und geben Sie im Basisregister den Pfad der benutzerdefinierten CSS-Datei ein. Standard-Designkonstrukte des adaptiven Formulars und mit den in der benutzerdefinierten CSS-Datei aufgeführten Konstrukten überschriebene Konstrukte.

Komponenten

Komponenten, die in diesem Artikel behandelt werden, verfügen über vordefinierte CSS-Klassen. Sie können die Variablen bearbeiten, um die Stile in den CSS-Klassen zu ändern. Alternativ dazu können Sie die gesamte Klasse neu definieren. In diesem Abschnitt werden die Klassen in den Komponenten und Stile, die Sie mithilfe von Variablen ändern können, beschrieben.

Container-Stile

Ein Container ist die Komponente der obersten Ebene. Andere Bedienfelder und Felder befinden sich unter der Container-Komponente.
CSS-Klasse
guideContainerNode
Variablenbeschreibung
Variablenbeschreibung
container-bgColor
Hintergrundfarbe des Containers
container-padding
Füllbereich für den Containers
container-margin
Rand für den Container
container-fontColor
Schriftfarbe für den Container

Feldstile

Adaptive Formulare enthalten verschiedene Arten von Feldern. Jedes Feld verfügt über einen eindeutigen Klassennamen, der der Name des Feldes ist. The field also has a common class name guideFieldNode .
Felder enthalten Beschriftungen, Widgets, Hilfebeschreibung (lange und kurze Beschreibungen) und Feldhilfesymbole (Fragezeichen).
CSS-Klasse
guideFieldNode
Variablen
Beschreibung
field-padding
Auffüllung für das Feld
field-error-font-color
Schriftfarbe der Fehlermeldung des Felds
field-error-font-size
Schriftgröße der Fehlermeldung des Felds

Beschriftungsstile

The HTML element label used for the field includes the classes left or top depending on whether the label is at the top or left.
CSS-Klasse
guideFieldLabel
Variablen
Beschreibung
label-font-color
Schriftfarbe für die Feldbeschriftung
label-font-size
Schriftgröße für die Feldbeschriftung
label-line-height
CSS-Zeilenhöheneigenschaft für die Feldbeschriftung
label-font-weight
CSS-Schriftbreiteneigenschaft für die Feldbeschriftung
label-margin
Rand für die Feldbeschriftung
The CSS rules for the label are applied using the guideFieldLabel label. Wenn Sie ein Verfasser sind, überschreiben Sie diese Regel, um Ihre benutzerdefinierten Änderungen vorzunehmen.

Widget-Stile

Je nach Typ enthalten Widgets auch Klassen. Normalerweise beinhalten Widgets die guideFieldWidget -Klasse. Die Widgets, die mit HTML geliefert werden, verwenden normalerweise die standardmäßige HTML-Elementeingabe und -Auswahl. Der Stil wird entsprechend ausgeführt. Sie können ein benutzerdefiniertes Widget nicht anpassen, indem Sie die Variablen ändern.
CSS-Klasse
guideFieldWidget
Variablen
Beschreibung
widgets-bg-color
Hintergrundfarbe für die Widgets (funktioniert nicht für Kontrollkästchen und Optionsfelder)
widgets-border-color
Rahmenfarbe für dieses Widget
widgets-border-thickness
Rahmengröße für die Widgets
widgets-border-radius
Rahmenradius für die Widgets
widgets-border-type
Rahmentyp für die Widgets
widget-border-focus-type
Fokustyp für Widget-Rahmen
widgets-border
Konsolidierter Rahmenstil von Widgets
widgets-font-color
Farbe des Texts im Widget
widgets-font-size
Größe des Textes innerhalb des Widgets
widgets-line-height
CSS-Zeilenhöhen-Eigenschaft für das Widget
widgets-padding
CSS-Auffüllung für das Widget
widgets-focus-border-color
Rahmenfarbe, wenn das Widget im Fokus ist
widgets-mandatory-border-color
Randfarbe des Widgets für die Pflichtfelder
widgets-mandatory-bg-color
Hintergrundfarbe des Widgets für die Pflichtfelder
widgets-disabled-bg-color
Hintergrundfarbe für das Widget, wenn das Feld deaktiviert ist
widgets-disabled-font-color
Schriftfarbe für das Widget, wenn das Feld deaktiviert ist
widgets-disabled-border-color
Rahmenfarbe für das Widget, wenn das Feld deaktiviert ist
widget-height
Höhe des Widgets (funktioniert nicht für Kontrollkästchen und Optionsfelder)
checkbutton-height
Höhe für Kontrollkästchen und Optionsfelder.
listboxwidget-height
Maximale Höhe für eine Mehrfachauswahl-Dropdown-Liste

Einschränkungen beim Widget-Stil

Der Stil für fokussierte, deaktivierte und Pflichtfelder ist auf Variablen eingeschränkt. Sie können diese jedoch ändern, indem Sie die Stile überschreiben. Einschränkungen mithilfe von Variablen wird hauptsächlich dazu verwendet, um die Anzahl der Variablen zu kontrollieren. Die Einschränkung kann gelockert werden, wenn sich das Erscheinungsbild eines Felds drastisch ändert, da es sich in einem der zuvor besprochenen Status befindet.

Hilfebeschreibung

Der Verfasser kann den Hilfeinhalt in den Feldern unter Verwendung der kurzen und langen Beschreibung angeben. Both components have a common class .guideHelpDescription and another class .long / .short , depending on the type of description. Der Hilfeinhalt wird in einem Absatzelement eingeschlossen, um den Stil der Beschreibung zu überschreiben. Die Hilfebeschreibung (lang und kurz) wird mithilfe der Variablen geändert. Angefangen wird mit Widgets-Hilfe, wie in der nachfolgenden Tabelle angegeben:
Variablen
Beschreibung
widgets-help-long-bg-color
Hintergrundfarbe der langen Hilfe der Widgets
widgets-help-long-border-color
Rahmenfarbe der langen Hilfe der Widgets
widgets-help-long-border-indicator-color
Rahmenfarbe für linken Indikator der langen Hilfe der Widgets
widgets-help-short-bg-color
Hintergrundfarbe der kurzen Hilfe der Widgets
widgets-help-short-color
Schriftfarbe der kurzen Hilfe der Widgets
widgets-help-short-tooltip-bg-color
Hintergrundfarbe der kurzen QuickInfo-Hilfe der Widgets
widgets-help-short-tooltip-color
Schriftfarbe der kurzen QuickInfo-Hilfe·der Widgets

Geschäftsbedingungen

Mit dem Bedingungs-(TnC )Widget können Sie Bedingungen angeben. Sie können das Widget mithilfe von Variablen, die in der folgenden Tabelle beschrieben sind, anpassen.
Variablen
Beschreibung
tnc-unvisited Schriftfarbe des ungeöffneten tnc-Links.
tnc-visited Schriftfarbe des geöffneten tnc-Links.

Schaltfläche

Schaltflächen sind auch Widgets. Allerdings unterscheidet sich deren Stil von Widgets. In den adaptiven Formularen bildet Folgendes eine Schaltflächen:
  • button
  • Element mit Klasse .button
HTML-Code für Schaltfläche:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
CSS-Klasse
Beschreibung
iconButton-icon
Bietet Symbole für Schaltfläche
iconButton-label
Stilschaltflächen-Bezeichnung/Beschriftung
Variablen
Beschreibung
button-border-size
Rahmengröße für die Schaltflächen
button-border-type
Rahmentyp
button-padding
CSS-Auffüllung für die Schaltfläche
button-font-size
Schriftgröße für die Schaltfläche
button-background-color
Hintergrundfarbe für die Schaltfläche
button-font-color
Schriftfarbe der Schaltfläche
button-border-color
Rahmenfarbe der Schaltfläche
button-large-padding
Auffüllung für große Schaltflächen (Schaltflächen mit Klasse .buttonlarge)
button-large-font-size
Schriftgröße für große Schaltflächen
button-small-padding
Auffüllung für kleine Schaltflächen (Schaltflächen mit Klasse .buttonsmall)
button-small-font-size
Schriftgröße für kleine Schaltflächen
button-info-background-color
Hintergrundfarbe für informative Schaltflächen (Schaltflächen mit Klasse .buttoninformative)
button-info-font-color
Schriftfarbe für informative Schaltflächen
button-info-border-color
Rahmenfarbe für informative Schaltflächen
button-warning-background-color
Hintergrundfarbe für Warnungstilschaltflächen (Schaltflächen mit Klasse .buttonwarning)
button-warning-font-color
Schriftfarbe für Warnungstilschaltflächen
button-warning-border-color
Rahmenfarbe für Warnungstilschaltflächen
button-alert-background-color
Hintergrundfarbe für Warnschaltflächen (Schaltflächen mit Klasse .buttonalert)
button-alert-font-color
Schriftfarbe für Warnschaltflächen)
button-alert-border-color
Rahmenfarbe für Warnschaltflächen)

Fragezeichen

Für die Widgets wird ein Fragezeichen angezeigt, wenn ein Verfasser eine lange Beschreibung im Hilfeinhalt hinzufügt. Das im Bootstrap bereitgestellte Standardsymbol wird verwendet. Um ein benutzerdefiniertes Symbol zu verwenden, können Sie die Bootstrap-Symbole anpassen.
CSS-Klasse
guideHelpQuestionMark
Variablen
Beschreibung
questionmark-font-color
Farbe des Symbols
questionmark-hover-font-color
Farbe des Symbols, wenn mit der Maus darauf gezeigt wird

Tabelle

Sie können das Farbthema für Kopf- und Textzeilen in einer Tabelle ändern, indem Sie die folgenden Variablen verwenden.
Variablen
Beschreibung
table-header-bg-color
Hintergrundfarbe für die Kopfzeile. Der Standardwert ist #333 .
table-odd-row-bg-color
Hintergrundfarbe für die ungeraden Textzeile. Der Standardwert ist rgb(255, 255, 255) .
table-even-row-bg-color
Hintergrundfarbe für gerade Textzeile. Der Standardwert ist #eee .

Dateianhang

Mit dem Dateianhangswidget von adaptiven Formularen können Sie Dateien hochladen. Sie können außerdem das Widget mithilfe von Variablen anpassen.
Variablen
Beschreibung
fileItemPadding
Auffüllung für die im Widget angezeigten Dateien
fileItemBackground
Hintergrundfarbe für das Dateielement
fileItemBorderColor
Rahmenfarbe für den oberen Rahmen
fileItemColor
Schriftfarbe für das Dateielement
filePreviewIconColor
Farbe für das Vorschau-Symbol (Bootstrap-Symbol) im Widget
fileItemCommentHeight
Höhe des Kommentars für das Dateielement

Bedienfeldstil

Ein Bedienfeld enthält eine optionale Symbolleiste und entsprechenden Inhalt.
CSS-Klasse
guidePanelNode
Variablen
Beschreibung
panel-background-color
Hintergrundfarbe für das Bedienfeld
panel-font-size
Schriftgröße für den Bedienfeldtext
panel-font-color
Schriftfarbe für den Bedienfeldtext
panel-padding
Auffüllung im Bedienfeld
panel-description-font-size
Schriftgröße der Bedienfeldbeschreibung
panel-description-padding
Auffüllung der Bedienfeldbeschreibung
panel-help-bg-color
Hintergrundfarbe für die Bedienfeldhilfe
panel-help-border-indicator-color
Indikatorrahmenfarbe für die Bedienfeldhilfe
Der Bedienfeldknoten wird in Navigatoren und Inhalt unterteilt. Es gibt keine separate Stilkomponente für den Inhalt. Die beschriebenen Variablen werden auf den Navigator sowie Inhalte angewendet.
&ast;Das oberste Bedienfeld (RootPanel) hat diese Klasse nicht.

Mobile Stile

Kopfzeilenleiste

Diese Variablen beeinflussen die Überschriftenleiste, die auf einem Mobilgerät oder Geräten mit kleinem Bildschirm, die Bedienfeldtitel und Navigatoren „Weiter“ und „Zurück“ beinhalten, sichtbar ist.
CSS-Klasse
guide-header-bar
Variablen
Beschreibung
headerbar-background-color
Hintergrundfarbe für die Kopfzeilenleiste
headerbar-font-color
Schriftfarbe für den Text in der Kopfzeilenleiste
headerbar-padding
Auffüllung für die Kopfzeilenleiste

Scroll-Indikator

Diese Variablen beeinflussen den Scroll-Indikator, der als orangefarbener Pfeil auf einem Mobilgerät oder auf Geräten mit kleinem Bildschirm angezeigt wird. Der Scroll-Indikator zeigt an, dass es Inhalt gibt, der über den sichtbaren Bereich des Bildschirms hinausgeht. Sie können nach unten blättern, um diesen Inhalt anzuzeigen. Wenn Sie das Ende des Inhalts erreichen, wird der Pfeil nicht mehr angezeigt.
CSS-Klasse
mobileScrollIndicator
Variablen
Beschreibung
scrollIndicatorBottom
Feste Position eines Scroll-Indikators von unten
scrollIndicatorRight
Feste Position eines Scroll-Indikators von rechts
scrollIndicatorWidth
Breite des Scroll-Indikators
scrollIndicatorHeight
Höhe des Scroll-Indikators

Feste spezifische Variablen für das Symbolleistenlayout für Mobilgeräte

Diese Variablen in der folgenden Tabelle beeinflussen das feste Symbolleistenlayout für Mobilgeräte.
CSS-Klasse
mobileToolbar
Variablen
Beschreibung
mobileToolbarBottom
Feste Position der Symbolleiste auf einem Mobilgerät von unten
mobileToolbarTop
Feste Position der Symbolleiste auf einem Mobilgerät von oben
mobileToolbarLeft
Feste Position der Symbolleiste auf einem Mobilgerät von links
mobileToolbarRight
Feste Position der Symbolleiste auf einem Mobilgerät von rechts
mobileButtonIconTopMargin
Feste Position der Schaltflächensymbole auf der Symbolleiste von oben
mobileButtonIconWidth
Die Breite der Schaltflächensymbole auf der Symbolleiste auf einem Mobilgerät
mobileButtonIconHeight
Höhe der Schaltflächensymbole auf der Symbolleiste auf einem Mobilgerät
mobilefixedtoolbarbgcolor
Hintergrundfarbe der Symbolleiste auf einem Mobilgerät