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. Das Feld hat auch einen gemeinsamen Klassennamen 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

Das für das Feld verwendete HTML-Element label enthält die Klassen left oder top, je nachdem, ob sich die Beschriftung oben oder links befindet.

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

Die CSS-Regeln für die Beschriftung werden mit der Beschriftung guideFieldLabel angewendet. 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. Beide Komponenten haben eine gemeinsame Klasse .guideHelpDescription und eine andere Klasse .long/ .short, je nach Typ der Beschreibung. 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:

• input[type = text]
• 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

Navigatorstile

Es gibt vier Arten von Navigatorregisterkarten. Dazu gehören Registerkarten links, oben, im Assistenten und im Akkordeon. Jeder Navigator beinhaltet eine andere Klasse.

Navigator	CSS-Klasse
Accordion	.accordion-navigators
tabs on the left	.tab-navigators-vertical
tabs on the top	.tab-navigators
Wizard	.wizard-navigators

Im Folgenden wird der HTML-Code für das Registerkartennavigatorelement gezeigt (ähnlich der Bootstrap-Registerkarten):

<li>

tab title

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></span>

........................... repeatable buttons, if the repeatable configuration is set ................................

<div class = "repeatableButtons">

`<button name=“Add” class=“Add”/%3E%60%60%3Cbutton%20name=?lang=de"Remove" class=“Remove”/%3E%60%60%3C/div%3E%60%60%3C/a%3E%60%60%3C/div%3E%60%60…%20panel%20content%20…%60%60%3C/div%3E%60%60%3C/div%3E%60Sie%20k%C3%B6nnen%20den%20Stil%20des%20Navigators%20mithilfe%20der%20CSS-Regeln,%20die%20die%20Elemente%20mithilfe%20der%20untergeordneten%20Selektoren%20ausw%C3%A4hlen,%20%C3%A4ndern.%20Wenn%20Sie%20beispielsweise%20einen%20textDecoration-Stil%20im%20Anker-Tag%20hinzuf%C3%BCgen:Registerkartennavigator%20oben:%60.tab-navigators%60%60li%20a%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60%60Tab%20navigator%20on%20left:%60%60.tab-navigators-vertical%60%60li%20a%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60%60Accordion%20navigator:%60%60.accordion-navigators%20.guideHeader%20a%20.guideSummary%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60%60Wizard%20navigator:%60%60.wizard-navigators%60%60li%20a%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60Zus%C3%A4tzlich,%20gibt%20es%20Klassen%20f%C3%BCr%20Stilregisterkartennavigatoren%20(links%20und%20oben?lang=de), abhängig davon, ob sie verschachtelte/untergeordnete/Unter-Navigatoren haben.

CSS-Klasse	Beschreibung
nested_true	Registerkartennavigatoren (links und oben) mit verschachtelten/untergeordneten/Unter-Navigatoren
nested_false	Registerkartennavigatoren (links und oben) mit verschachtelten/untergeordneten/Unter-Navigatoren

Die guideNavIcon-Klasse bietet ein Standardsymbol für Registerkartennavigatoren (links und oben) und Assistentennavigatoren.

CSS-Klasse

guideNavIcon

Variablen	Beschreibung
Registerkartennavigatoren
navigator-bg-color	Hintergrundfarbe für den gesamten Registerkartenavigator
tabs-bg-color	Hintergrundfarbe für die Registerkarte
tabs-font-color	Schriftfarbe für die Registerkarte
tabs-hover-bg-color	Hintergrundfarbe für die Registerkarte beim Maushover
tabs-hover-font-color	Schriftfarbe für die Registerkarte beim Maushover
tabs-active-bg-color	Hintergrundfarbe, wenn das Bedienfeld im Fokus ist (aktiv)
tabs-active-font-color	Schriftfarbe, wenn das Bedienfeld im Fokus ist
tabs-completed-bg-color	Hintergrundfarbe, wenn der Abschlussausdruck des Bedienfelds „true“ zurückgibt
tabs-completed-font-color	Schriftfarbe, wenn der Abschlussausdruck für das Bedienfelds „true“ zurückgibt
tabs-stepped-bg-color	Hintergrundfarbe, wenn das Bedienfeld einmal im Fokus war, aber der Abschlussausdruck „false“ zurückgibt
tabs-stepped-font-color	Schriftartfarbe, wenn das Bedienfeld einmal im Fokus war, aber der Abschlussausdruck „false“ zurückgibt
tabs-border-color	Rahmenfarbe für die Registerkarte
tabs-font-size	Schriftgröße für die Registerkarte
tabs-padding	Auffüllung für die Registerkarte
tabs-margin	Rand für die Registerkarte
tabs-vertical-margin	Rand für die vertikalen Registerkarten
tabs-border-thickness	Rahmengröße für die Registerkarten
tabs-min-height	Mindesthöhe der Registerkarten
heirarichal-indent	Einzug für die verschachtelten Registerkarten
Assistentennavigatoren
wizard-navigator-bg-color	Hintergrundfarbe für den gesamten Assistentennavigator
wizard-tabs-bg-color	Hintergrundfarbe für den Assistenten
wizard-tabs-font-color	Schriftfarbe für den Assistenten
wizard-tabs-active-bg-color	Hintergrundfarbe, wenn das Bedienfeld im Fokus ist (aktiv)
wizard-tabs-active-font-color	Schriftfarbe, wenn das Bedienfeld im Fokus ist (fokussiert)
wizard-tabs-completed-bg-color	Hintergrundfarbe, wenn der Abschlussausdruck des Bedienfelds „true“ zurückgibt
wizard-tabs-completed-font-color	Schriftfarbe, wenn der Abschlussausdruck für das Bedienfelds „true“ zurückgibt
wizard-tabs-stepped-bg-color	Hintergrundfarbe, wenn das Bedienfeld einmal im Fokus war, aber der Abschlussausdruck „false“ zurückgibt
wizard-tabs-stepped-font-color	Schriftartfarbe, wenn das Bedienfeld einmal im Fokus war, aber der Abschlussausdruck „false“ zurückgibt
wizard-tabs-border-color	Farbe für den Assistenten
wizard-tabs-font-size	Schriftgröße für den Assistenten
wizard-tabs-padding	Auffüllung für den Assistenten
wizard-tabs-border-thickness	Rahmengröße für den Assistenten
wizard-nav-bullet-border	Rahmenfarbe des Aufzählungszeichens für den Assistentennavigator (Präfix für Beschriftung/Bezeichnung)
wizard-progress-bg-color	Hintergrundfarbe der Statusanzeige des Assistentennavigators
wizard-progress-color	Die Füllfarbe für die Statusanzeige
Akkordeonnavigatoren
accordion-tabs-padding	Auffüllung für Akkordeon

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