Stilkonstrukte für adaptive Formulare styling-constructs-for-adaptive-forms
Adobe empfiehlt, die modernen und erweiterbaren Kernkomponentenzur Datenerfassung zu verwenden, um neue adaptive Formulare zu erstellenoder adaptive Formulare zu AEM Sites-Seiten hinzuzufügen. Diese Komponenten stellen einen bedeutenden Fortschritt bei der Erstellung adaptiver Formulare dar und sorgen für beeindruckende Anwendererlebnisse. In diesem Artikel wird der ältere Ansatz zum Erstellen adaptiver Formulare mithilfe von Foundation-Komponenten beschrieben.
Voraussetzungen prerequisites
Kenntnisse im Umgang mit CSS und dem LESS-Framework.
Was angepasst werden kann what-can-be-customized
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. Das Gestalten von Authoring-Komponenten, wie Dialogfelder und Statusleisten, die Warnhinweise anzeigen, würde den Rahmen dieses Artikels sprengen. 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 customizing-styles-in-adaptive-forms
Das LESS-Framework vereinfacht die Anpassung von Stilen in adaptiven Formularen. Mit dem Framework können Sie Stile mit einem Satz von Variablen und Funktionen (Mixins) definieren. Das LESS-Framework hilft, die Größe des gebündelten Codes zu reduzieren und seine Wiederverwendbarkeit zu verbessern.
Sie können Stile adaptiver Formulare wie folgt anpassen:
- Design ändern
- Stil der Komponente ändern
Design ändern changing-theme
Sie können das Design eines adaptiven Formulars ändern, um sicherzustellen, dass sein Aussehen mit Web-Seiten konsistent ist, in denen das adaptive Formular integriert ist.
Änderungen des Gesamtaussehens des adaptiven Formulars mithilfe von CSS-Eigenschaften sind in der Regel Teil der Designänderungen. Große Veränderungen am Aussehen 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 Web-Seite:
- Hintergrundfarbe
- Rahmen (Typ, Farbe, Stärke)
- Schriftfarbe
- Auffüllung
- Rand
- Schriftgrad
- Zeilenhöhe
Derzeit sind LESS-Variablen nur für diese Eigenschaften der verschiedenen Elemente in einem adaptiven Formular definiert.
Änderung des Komponentenstils changing-component-style
Sie können Änderungen am Erscheinungsbild, am Layout, an der Positionierung und an der Sichtbarkeit von Elementen vornehmen. Erstellen oder aktualisieren Sie dazu Ihre benutzerdefinierten CSS-Dateien und beziehen sie dabei die in diesem Artikel aufgeführten Design-Konstrukte 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 components
Die in diesem Artikel behandelten Komponenten verfügen über vordefinierte CSS-Klassen. Sie können die Variablen bearbeiten, um die Stile in den CSS-Klassen zu ändern. Alternativ können Sie die gesamte Klasse neu schreiben. In diesem Abschnitt werden die Klassen innerhalb von Komponenten und Stilen beschrieben, die Sie mithilfe von Variablen ändern können.
Containerstile container-styling
Ein Container ist die Komponente der obersten Ebene. Andere Bedienfelder und Felder befinden sich unterhalb der Containerkomponente.
Feldstile field-styling
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).
Beschriftungsstile label-styling
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.
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 widgets-styling
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. Die Gestaltung wird entsprechend ausgeführt. Sie können ein benutzerdefiniertes Widget nicht gestalten, indem Sie die Variablen ändern.
Einschränkungen beim Widget-Stil limitations-in-widget-styling
Die Gestaltung für fokussierte, obligatorische und deaktivierte Felder wird mithilfe von Variablen eingeschränkt. Sie können sie 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 help-description
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:
Geschäftsbedingungen terms-and-conditions
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.
Schaltfläche button
Schaltflächen sind auch Widgets. Ihr Stil unterscheidet sich jedoch geringfügig von den Widgets. In adaptiven Formularen bildet Folgendes eine Schaltfläche:
- 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>
Fragezeichen question-mark
Für die Widgets wird ein Fragezeichen angezeigt, wenn eine Autorin bzw. ein Autor eine lange Beschreibung in den Hilfeinhalt hinzufügt. Das im Bootstrap bereitgestellte Standardsymbol wird verwendet. Um ein benutzerdefiniertes Symbol zu verwenden, können Sie die Bootstrap-Symbole anpassen.
Tabelle table
Sie können das Farbschema für Kopf- und Textzeilen in einer Tabelle ändern, indem Sie folgende Variablen verwenden.
Dateianhang file-attachment
Mit dem Dateianhangs-Widget von adaptiven Formularen können Sie Dateien hochladen. Sie können außerdem das Widget mithilfe von Variablen anpassen.
Navigatorstile navigator-styles
Es gibt vier Arten von Navigatorregisterkarten. Dazu gehören Registerkarten links, oben, im Assistenten und im Akkordeon. Jeder Navigator beinhaltet eine andere Klasse.
Im Folgenden finden Sie den HTML-Code für das Registerkartennavigator-Element (ähnlich den Bootstrap-Registerkarten):
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... 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.
Die guideNavIcon-Klasse stellt ein Standardsymbol für Registerkartennavigatoren (links und oben) und Assistentennavigatoren bereit.
Bedienfeldstil panel-styling
Ein Bedienfeld enthält eine optionale Symbolleiste und entsprechenden Inhalt.
Der Bedienfeldknoten ist in Navigatoren und Inhalte unterteilt. Es ``gibt keine separate Stilkomponente für den Inhalt. Die beschriebenen Variablen werden auf Navigator und Inhalt angewendet.
Das oberste Bedienfeld (RootPanel) verfügt nicht über diese Klasse.
Mobilstile mobile-styling
Kopfzeilenleiste header-bar
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.
Scroll-Indikator scroll-indicator
Diese Variablen beeinflussen den Scroll-Indikator, einen orangefarbenen Pfeil, der auf einem Mobilgerät oder 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 scrollen, um ihn zu sehen. Wenn Sie das Ende des Inhalts erreichen, verschwindet der Pfeil.
Feste Symbolleisten-Layout-spezifische Variablen für Mobilgeräte mobile-fixed-toolbar-layout-specific-variables
Diese Variablen in folgender Tabelle beeinflussen das feste Symbolleisten-Layout für Mobilgeräte.
Designspezifische Variable theme-specific-variable
Das Design Einfache Registrierung unter /etc/clientlibs/fd/af/guidetheme/simpleEnrollment und die Kategorie guide.theme.simpleEnrollment
führen außerdem einige neue Variablen ein. Wenn Sie eine einfache Registrierung mit verbessertem Design erstellen möchten, können Sie folgende zusätzliche Variablen verwenden: