Stilkonstrukte für adaptive Formulare

Voraussetzungen

Kenntnisse im Umgang mit CSS und dem 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 gestalten. 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 LESS) nur dann zu erstellen, wenn Sie mit dem Designeditor 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 Satz 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
  • Stil der Komponente ändern

Design ändern

Sie können das Design eines adaptiven Formulars ändern, um sicherzustellen, dass sein Erscheinungsbild mit den Webseiten konsistent ist, auf denen das adaptive Formular eingebettet ist.

Änderungen des Gesamtaussehens des adaptiven Formulars mithilfe von CSS-Eigenschaften sind in der Regel Teil der Designänderungen. Größere Änderungen am "Aussehen und Verhalten des adaptiven Formulars", wie Änderungen am Layout und an 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
  • Rand
  • Schriftgrad
  • Zeilenhöhe

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. Erstellen oder aktualisieren Sie dazu Ihre benutzerdefinierten CSS-Dateien und beziehen sie dabei die in diesem Artikel aufgeführten Designkonstrukte ein.

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.

Containerstile

Ein Container ist die Komponente der obersten Ebene. Andere Bedienfelder und Felder befinden sich unterhalb der Containerkomponente.

CSS-Klasse

guideContainerNode

Variablenbeschreibung

Variablenbeschreibung

container-bgColor

Hintergrundfarbe des Containers

container-padding

Auffüllung für den Container

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 enthält außerdem den gemeinsamen Klassennamen guideFieldNode.

Felder enthalten Bezeichnungen, Widgets, Hilfebeschreibung (lange und kurze) sowie 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 HTML-Element Bezeichnung, das für das Feld verwendet wird, enthält die Klassen links oder oben, je nachdem, ob die Beschriftung sich oben oder links befindet.

CSS-Klasse

guideFieldLabel

Variablen

Beschreibung

label-font-color

Schriftfarbe für die Feldbezeichnung

label-font-size

Schriftgröße für die Feldbezeichnung

label-line-height

 CSS-Zeilenhöheneigenschaft für die Feldbezeichnung

label-font-weight

 CSS-Schriftbreiteneigenschaft für die Feldbezeichnung

label-margin

Rand für die Feldbezeichnung

Die CSS-Regeln für die Bezeichnung werden mithilfe der guideFieldLabel-Bezeichnung angewendet. Wenn Sie Autor sind, überschreiben Sie diese Regel, um Ihre benutzerdefinierten Änderungen sichtbar zu machen.

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 die Widgets

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 im Widget

widgets-line-height

 CSS-Zeilenhöheneigenschaft 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

Rahmenfarbe 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änkungen können abgeschwächt werden, wenn sich das Erscheinungsbild eines Felds drastisch ändert, da es sich in einem der oben genannten Status befindet.

Hilfebeschreibung

Ein Autor kann den Hilfeinhalt in den Feldern unter Verwendung der Komponenten für kurze und lange Beschreibungen angeben. Beide Komponenten haben die gemeinsame Klasse .guideHelpDescription und eine weitere 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 Widget-Hilfe

widgets-help-long-border-color

Rahmenfarbe der langen Widget-Hilfe

widgets-help-long-border-indicator-color

Rahmenfarbe für linken Indikator der langen Widget-Hilfe

widgets-help-short-bg-color

Hintergrundfarbe der kurzen Widget-Hilfe

widgets-help-short-color

Schriftfarbe der kurzen Widget-Hilfe

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 Geschäftsbedingungs-(TnC )-Widget können Sie Geschäftsbedingungen angeben. Sie können das Widget mithilfe der Variablen anpassen, die in folgender Tabelle beschrieben sind.

Variablen

Beschreibung
tnc-unvisited Schriftfarbe des ungeöffneten Geschäftsbedingungs-Links
tnc-visited Schriftfarbe des geöffneten Geschäftsbedingungs-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]
  • Schaltfläche
  • 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

Bestimmt den Stil der Schaltflächenbezeichnung/-beschriftung

Variablen

Beschreibung

button-border-size

Rahmengröße für die Schaltflächen

button-border-type

Rahmentyp

button-padding

CSS-Auffülleigenschaft 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 Warnungsstilschaltflächen (Schaltflächen mit Klasse .buttonwarning)

button-warning-font-color

Schriftfarbe für Warnungsstilschaltflächen

button-warning-border-color

Rahmenfarbe für Warnungsstilschaltflä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 Farbschema für Kopf- und Textzeilen in einer Tabelle ändern, indem Sie folgende 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 Textzeilen. Der Standardwert ist rgb(255, 255, 255).

table-even-row-bg-color

Hintergrundfarbe für gerade Textzeilen. 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

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"/>

<button name="Remove" class="Remove"/>

</div>

</a>

</div>

................................ panel content ..................................

</div>

</div>

Sie können den Stil des Navigators mithilfe der CSS-Regeln ändern, anhand derer die Elemente mithilfe der untergeordneten Selektoren ausgewählt werden. Wenn Sie beispielsweise einen Textdekorationsstil im Anker-Tag hinzufügen:

Registerkartennavigator oben:

.tab-navigators

li a {

text-decoration:

underline;

}

Tab navigator on left:

.tab-navigators-vertical

li a {

text-decoration:

underline;

}

Accordion navigator:

.accordion-navigators .guideHeader a .guideSummary {

text-decoration:

underline;

}

Wizard navigator:

.wizard-navigators

li a {

text-decoration:

underline;

}

Zusätzlich gibt es Klassen für Stilregisterkarten-Navigatoren (links und oben), abhängig davon, ob sie verschachtelte/untergeordnete/Unternavigatoren haben.

CSS-Klasse

Beschreibung

nested_true

Registerkartennavigatoren (links und oben) mit verschachtelten/untergeordneten/Unternavigatoren

nested_false

Registerkartennavigatoren (links und oben) ohne verschachtelte/untergeordnete/Unternavigatoren

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

CSS-Klasse

guideNavIcon
HINWEIS

Sie können das Symbol für einen bestimmten Navigator ändern, indem Sie eine CSS-Klasse im Bedienfeld unter Authoring, Formularbeispiel <CLASS_NAME> bereitstellen. Sie können ein <CLASS_NAME>_nav für das Symbol des Navigators hinzufügen.

Variablen

Beschreibung

Registerkartennavigatoren

navigator-bg-color

Hintergrundfarbe für den gesamten Registerkartennavigator

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, wenn mit der Maus darauf gezeigt wird

tabs-hover-font-color

Schriftfarbe für die Registerkarte, wenn mit der Maus darauf gezeigt wird

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 des Bedienfelds „true“ zurückgibt

tabs-stepped-bg-color

 Hintergrundfarbe, wenn das Bedienfeld im Fokus war, aber der Abschlussausdruck „false“ zurückgibt

tabs-stepped-font-color

 Schriftartfarbe, wenn das Bedienfeld 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 des Bedienfelds „true“ zurückgibt

wizard-tabs-stepped-bg-color

 Hintergrundfarbe, wenn das Bedienfeld im Fokus war, aber der Abschlussausdruck „false“ zurückgibt

wizard-tabs-stepped-font-color

Schriftartfarbe, wenn das Bedienfeld 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 Statusleiste des Assistentennavigators

wizard-progress-color

Füllfarbe für die Statusleiste

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.

*Das oberste Bedienfeld (RootPanel) verfügt nicht über diese Klasse.

Mobilstile

Kopfzeilenleiste

Diese Variablen beeinflussen die Kopfzeilenleiste, die auf einem Mobilgerät oder Geräten mit kleinem Bildschirm sichtbar ist, die Bedienfeldtitel und die Navigatoren „Weiter“ und „Zurück“ beinhalten.

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 Symbolleisten-Layout-spezifische Variablen für Mobilgeräte

Diese Variablen in folgender Tabelle beeinflussen das feste Symbolleisten-Layout 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 von Schaltflächensymbolen auf der Symbolleiste von oben

mobileButtonIconWidth

Breite von Schaltflächensymbolen 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

Auf dieser Seite