Formateringskonstruktioner för adaptiva formulär styling-constructs-for-adaptive-forms
Adobe rekommenderar att du använder den moderna och utbyggbara datainhämtningen Core Componentsför att skapa nya adaptiva Formseller att lägga till adaptiva Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs det äldre sättet att skapa Adaptiv Forms med baskomponenter.
Förutsättningar prerequisites
Kunskap om CSS och LESS Framework.
Vad kan anpassas what-can-be-customized
I artikeln listas allmänt tillgängliga CSS-klasser för adaptiva formulär. Du kan använda dessa klasser för att formatera olika komponenter i ett anpassat formulär. Formateringen av redigeringskomponenter, t.ex. dialogrutor och statusfält som visar varningar, ligger utanför artikelns omfång. Använd dessa formateringskonstruktioner om du bara vill skapa format (med CSS eller Less) när du inte kan formatera komponenter med temaredigeraren.
Anpassa format i anpassningsbara formulär customizing-styles-in-adaptive-forms
Med LESS-ramverket blir det enklare att anpassa format i anpassningsbara formulär. I ramverket kan du definiera format med hjälp av en uppsättning variabler och funktioner (mixins). LESS-ramverket hjälper till att minska storleken på den paketerade koden och ökar dess återanvändbarhet.
Du kan anpassa anpassade formulärformat på följande sätt:
- Ändra temat
- Ändra komponentens stil
Ändra tema changing-theme
Du kan ändra temat för ett anpassat formulär för att se till att det ser ut som på de webbsidor där det anpassade formuläret är inbäddat.
Ändringar av det övergripande utseendet på det adaptiva formuläret med hjälp av CSS-egenskaper är vanligtvis en del av temaförändringar. Stora förändringar av logotypen"ok och känsla i den adaptiva formen, t.ex. ändringar av komponenternas layout och placering, betraktas inte som temaförändringar.
Baserat på Bootstrap definierar följande uppsättning CSS-egenskaper temat för en webbsida:
- Bakgrundsfärg
- Kant (text, färg, tjocklek)
- Teckenfärg
- Utfyllnad
- Marginal
- Teckenstorlek
- LineHeight
För närvarande definieras LESS-variabler bara för dessa egenskaper för de olika elementen i en adaptiv form.
Ändra komponentstil changing-component-style
Du kan ändra utseende, layout, placering och synlighet för element. För att utföra den här uppgiften skapar eller uppdaterar du dina anpassade css-filer så att de innehåller de formateringskonstruktioner som listas i den här artikeln.
Om du vill använda ett format på ett anpassat formulär öppnar du det adaptiva formuläret i för redigering, öppnar egenskaper för adaptiv formulärbehållare och anger sökvägen till en anpassad CSS-fil på fliken Grundläggande. Standardformateringskonstruktioner för det adaptiva formuläret och åsidosätts av de konstruktioner som anges i den anpassade css-filen.
Komponenter components
Komponenterna som beskrivs i den här artikeln har sina fördefinierade CSS-klasser. Du kan redigera variablerna om du vill ändra formaten i CSS-klasserna. Du kan också skriva om hela klassen. I det här avsnittet beskrivs klasserna i komponenter och format som du kan ändra med variabler.
Behållarformat container-styling
En behållare är komponenten på den översta nivån. Andra paneler och fält ligger under behållarkomponenten.
Fältformat field-styling
Anpassningsbara formulär innehåller olika typer av fält. Varje fält har ett unikt klassnamn, som är fältets namn. Fältet har också ett vanligt klassnamn guideFieldNode.
Fälten innehåller etiketter, widgetar, hjälpbeskrivning (både lång och kort beskrivning) och hjälpikoner (frågetecken).
Etikettformat label-styling
HTML-elementet label som används för fältet innehåller klasserna left eller top beroende på om etiketten finns högst upp eller till vänster.
CSS-reglerna för etiketten tillämpas med etiketten guideFieldLabel . Om du är författare åsidosätter du den här regeln för att göra dina anpassade ändringar synliga.
Widgets-format widgets-styling
Beroende på typ innehåller widgetar även klasser. Vanligtvis innehåller widgetar klassen guideFieldWidget. De widgetar som levereras med HTML använder normalt elementindata och markering för standardelementet HTML. Formateringen görs därefter. Du kan inte formatera en anpassad widget genom att ändra variablerna.
Begränsningar i widgetformat limitations-in-widget-styling
Formateringen för fokuserade, obligatoriska och inaktiverade fält är begränsad med hjälp av variabler. Du kan dock ändra den genom att åsidosätta formaten. Begränsningar med hjälp av variabler anges huvudsakligen för att hålla antalet variabler under kontroll. Begränsningen kan förenklas om utseendet på ett fält ändras drastiskt eftersom det är i något av de lägen som diskuterades tidigare.
Hjälpbeskrivning help-description
En författare kan ange hjälpinnehåll i fälten med hjälp av komponenterna för kort och lång beskrivning. Båda komponenterna har en gemensam klass, .guideHelpDescription, och en annan klass, .long/ .short, beroende på typen av beskrivning. Hjälpinnehållet omsluts av ett styckeelement för att åsidosätta formateringen av beskrivningen. Hjälpbeskrivningen (både lång och kort) ändras med variabler som börjar med widgetshelp, vilket anges i följande tabell:
Villkor terms-and-conditions
Med widgeten Villkor (TnC ``) kan du ange villkor. Du kan anpassa widgeten med hjälp av de variabler som beskrivs i följande tabell.
Knapp button
Knappar är också widgetar. Men deras format skiljer sig något från widgetarna. I anpassningsbara former utgör något av följande en knapp:
- indata[type = text]
- knapp
- element med klass .button
HTML för knapp:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Frågetecken question-mark
För widgetarna visas ett questionMark när en författare lägger till en lång beskrivning i hjälpinnehållet. Standardikonen som finns i Bootstrap används. Om du vill använda en anpassad ikon kan du anpassa bootstrap-ikonerna.
Tabell table
Du kan ändra färgtemat för huvud- och innehållsrader i en tabell med hjälp av följande variabler.
Bifogad fil file-attachment
Med widgeten Bifogad fil i adaptiva formulär kan du överföra filer. Du kan också anpassa widgeten med hjälp av variablerna.
Navigeringsformat navigator-styles
Det finns fyra typer av navigeringsflikar. Det finns flikar till vänster, högst upp i guiden och dragspelet. Varje navigator har en egen klass.
Här följer HTML-koden för tabbnavigeringselementet (liknar bootstrap-flikarna):
<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>
Du kan ändra navigatorns format med CSS-regler som markerar elementen med underordnade väljare. Så här lägger du till ett textdekorationsformat till ankartaggen:
Fliknavigator överst:
.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;
}
Det finns dessutom klasser för att formatera tabbnavigatorer (både vänster och överst) baserat på om de har kapslade/underordnade/underordnade navigatorer.
Klassen guideNavIcon innehåller en standardikon för tabbnavigering (både vänster och överst) och guidenavigatorer.
Panelformat panel-styling
En panel innehåller ett valfritt verktygsfält och dess innehåll.
Panelnoden är uppdelad i navigatorer och innehåll. Det finns ingen separat formatkomponent för innehållet i ``. Variablerna som beskrivs tillämpas på navigatorn och innehållet.
Den översta panelen (RootPanel) har inte den här klassen.
Mobilformat mobile-styling
Sidhuvudsfält header-bar
Dessa variabler påverkar den rubrikrad som är synlig på en mobil enhet eller små skärmar som innehåller panelrubriker och navigeringsknappar för nästa och bakre.
Rullningsindikator scroll-indicator
Dessa variabler påverkar rullningsindikatorn, som är en orange pil som visas på en mobil enhet eller små skärmar. En rullningsindikator anger att det finns innehåll utanför den synliga delen av skärmen. Du kan rulla nedåt för att se den. När du klickar på slutet av innehållet försvinner pilen.
Mobile fixed toolbar layout-specific variables mobile-fixed-toolbar-layout-specific-variables
Variablerna i följande tabell påverkar den fasta verktygsfältslayouten för mobila enheter.
Temaspecifik variabel theme-specific-variable
Temat Enkel registrering på /etc/clientlibs/fd/af/guithema/simpleEnrollment och kategorin guide.theme.simpleEnrollment innehåller också några variabler. Om du vill skapa ett tema som förbättrar enkel registrering kan du använda följande"extra variabler":