Constructies voor stijlen voor adaptieve formulieren styling-constructs-for-adaptive-forms

de Adobe adviseert gebruikend de moderne en verlengbare gegevens vangen ​ Componenten van de Kern ​ voor ​ het creëren van nieuwe Aangepaste Forms ​ of ​ het toevoegen van Aangepaste Forms aan de pagina's van AEM Sites ​. Deze componenten betekenen een aanzienlijke vooruitgang in de aanmaak van Adaptive Forms en zorgen voor indrukwekkende gebruikerservaring. In dit artikel wordt een oudere aanpak beschreven voor de auteur Adaptive Forms die gebruikmaakt van stichtingscomponenten.

Vereisten prerequisites

Kennis van CSS en het LESS-framework.

Wat kan worden aangepast what-can-be-customized

In het artikel worden openbaar beschikbare CSS-klassen van adaptieve formulieren vermeld. Met deze klassen kunt u diverse componenten van een adaptief formulier opmaken. De opmaak van ontwerpcomponenten, zoals dialoogvensters en statusbalken met waarschuwingen, valt buiten het bereik van dit artikel. Gebruik deze het stileren constructs om stijlen (het gebruiken van CSS of Minder) tot stand te brengen slechts wanneer u componenten niet kunt stileren gebruikend ​ themaredacteur ​.

Stijlen in aangepaste formulieren aanpassen customizing-styles-in-adaptive-forms

Het LESS-framework vereenvoudigt het gebruik van hoofdletters en kleine letters om stijlen in aangepaste formulieren aan te passen. Met het framework kunt u stijlen definiëren met behulp van een set variabelen en functies (mixins). Het LESS-framework helpt de grootte van de gebundelde code te reduceren en vergroot de herbruikbaarheid ervan.

U kunt aangepaste formulierstijlen op de volgende manieren aanpassen:

Thema wijzigen changing-theme

U kunt het thema van een adaptief formulier wijzigen om ervoor te zorgen dat de weergave ervan consistent is met de webpagina's waarop het adaptieve formulier is ingesloten.

Wijzigingen in de algemene weergave van het aangepaste formulier met CSS-eigenschappen maken doorgaans deel uit van themawijzigingen. Belangrijke wijzigingen in de lo "ok and feel of the adaptive form, zoals wijzigingen in de lay-out en plaatsing van componenten, worden niet als themawijzigingen beschouwd.

Op basis van de laarzentrekker definieert de volgende set CSS-eigenschappen het thema van een webpagina:

Momenteel zijn LESS-variabelen alleen voor deze eigenschappen van de verschillende elementen in een adaptieve vorm gedefinieerd.

Componentstijl wijzigen changing-component-style

U kunt de vormgeving, lay-out, positionering en zichtbaarheid van elementen wijzigen. U kunt deze taak uitvoeren door uw aangepaste CSS-bestanden te maken of bij te werken, zodat deze de opmaakconstructies bevatten die in dit artikel worden vermeld.

Als u een stijl wilt toepassen op een adaptief formulier, opent u het adaptieve formulier in voor bewerking, opent u eigenschappen van adaptieve formuliercontainer en geeft u het pad van het aangepaste CSS-bestand op op het tabblad Standaard. Standaardstijlconstructies van het adaptieve formulier die worden overschreven door de constructies in het bestand custom.css.

Onderdelen components

De componenten die in dit artikel worden besproken, hebben hun vooraf gedefinieerde CSS-klassen. U kunt de variabelen bewerken om de stijlen in de CSS-klassen te wijzigen. U kunt ook de gehele klasse herschrijven. In deze sectie worden de klassen binnen componenten en stijlen beschreven die u kunt wijzigen met behulp van variabelen.

Containerstijl container-styling

Een container is de bovenste component. Andere deelvensters en velden bevinden zich onder de containercomponent.

Veldstijl field-styling

Adaptieve formulieren bevatten verschillende typen velden. Elk veld heeft een unieke klassenaam, de naam van het veld. Het veld heeft ook een algemene klassenaam guideFieldNode .

Velden zijn labels, widgets, Help-beschrijving (zowel lange als korte beschrijving) en veldHelp-pictogrammen (vraagteken).

Labelstijl label-styling

Het HTML element etiket dat voor het gebied wordt gebruikt omvat linker klassen of bovenkant afhankelijk van of het etiket bij de bovenkant of de linkerzijde is.

De CSS regels voor het etiket worden toegepast gebruikend het guideFieldLabel etiket. Als u een auteur bent, schrap deze regel om uw douaneveranderingen zichtbaar te maken.

Widget-stijl widgets-styling

Afhankelijk van het type, bevatten widgets ook klassen. Over het algemeen bevatten widgets de klasse guideFieldWidget . De widgets die bij HTML worden geleverd, gebruiken doorgaans de standaardinvoer voor HTML-elementen en selecteren. De opmaak wordt dienovereenkomstig toegepast. U kunt een aangepaste widget niet opmaken door de variabelen te wijzigen.

Beperkingen in widgetstijl limitations-in-widget-styling

De opmaak voor velden met focus, verplicht en uitgeschakeld is beperkt met behulp van variabelen. U kunt de stijl echter wijzigen door de stijlen te overschrijven. Er wordt vooral een beperking met variabelen gegeven om het aantal variabelen te controleren. De beperking kan worden versoepeld als de verschijning van een gebied drastisch verandert omdat het in om het even welke staten is die eerder worden besproken.

Help-beschrijving help-description

Een auteur kan de inhoud van de Hulp in de gebieden specificeren gebruikend Korte en Lange beschrijvingscomponenten. Beide componenten hebben een algemene klasse .guideHelpDescription en een andere klasse .long / .short , afhankelijk van het type beschrijving. De inhoud van de Hulp is ingesloten in een paragraafelement om het stileren van de beschrijving met voeten te treden. De beschrijving van de Help (zowel lang als kort) wordt gewijzigd met behulp van variabelen die beginnen met widgetshelp, zoals vermeld in de volgende tabel:

Voorwaarden en bepalingen terms-and-conditions

Met de widget Voorwaarden (TnC ``) kunt u voorwaarden en bepalingen opgeven. U kunt de widget aanpassen met de variabelen die in de volgende tabel worden beschreven.

Knop button

Knoppen zijn ook widgets. Hun opmaak wijkt echter enigszins af van die van de widgets. In adaptieve vormen vormt een van de volgende vormen een knop:

HTML code voor knop:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

Vraagteken question-mark

Voor widgets wordt een questionMark weergegeven wanneer een auteur een lange beschrijving toevoegt in de Help-inhoud. Het standaardpictogram in bootstrap wordt verstrekt gebruikt. Als u een aangepast pictogram wilt gebruiken, kunt u de opstartpictogrammen aanpassen.

Tabel table

U kunt het kleurthema voor koptekst- en tekstrijen in een tabel wijzigen met de volgende variabelen.

Bestandsbijlage file-attachment

Met de widget Bestandsbijlage van adaptieve formulieren kunt u bestanden uploaden. U kunt de widget ook aanpassen met de variabelen.

Navigatorstijlen navigator-styles

Er zijn vier typen navigatortabs. Deze omvatten lusjes op de linkerzijde, bovenkant, in de tovenaar en accordeon. Elke navigator heeft een andere klasse.

Hieronder ziet u de HTML-code voor het tabnavigatorelement (vergelijkbaar met de tabbladen):

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

U kunt het stileren van de navigator veranderen gebruikend CSS regels die de elementen gebruikend afstammende selecteurs selecteren. Als u bijvoorbeeld een stijl voor tekstdecoratie wilt toevoegen aan het ankerlabel:

Tabnavigator bovenaan:

.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;

}

Bovendien zijn er klassen om tabnavigators (zowel links als boven) op te maken op basis van het feit of ze geneste/onderliggende/subnavigators hebben.

De klasse guideNavIcon biedt een standaardpictogram voor tabnavigators (zowel links als boven) en wizardnavigators.

Opmaak deelvenster panel-styling

Een deelvenster bevat een optionele werkbalk en de bijbehorende inhoud.

Het knooppunt van het deelvenster is onderverdeeld in navigators en inhoud. Er is ``geen afzonderlijke opmaakcomponent voor de inhoud. De beschreven variabelen worden toegepast op de navigator en de inhoud.

Het bovenste deelvenster (RootPanel) heeft deze klasse niet.

Mobiele stijl mobile-styling

Kopbalk header-bar

Deze variabelen beïnvloeden de kopbalbar die op een mobiel apparaat of kleine het schermapparaten zichtbaar is die paneeltitel en volgende en achternavigators bevatten.

Schuifindicator scroll-indicator

Deze variabelen zijn van invloed op de schuifindicator. Dit is een oranje pijl die wordt weergegeven op een mobiel apparaat of een klein scherm. Een schuifindicator geeft aan dat er inhoud is buiten het zichtbare gedeelte van het scherm. U kunt omlaag schuiven om het te zien. Wanneer u het einde van de inhoud hebt bereikt, verdwijnt de pijl.

Mobiele vaste werkbalkspecifieke variabelen mobile-fixed-toolbar-layout-specific-variables

Deze variabelen in de volgende tabel zijn van invloed op de vaste indeling van de mobiele werkbalk.

Themaspecifieke variabele theme-specific-variable

Het Eenvoudige inschrijving thema bij /etc/clientlibs/fd/af/guidetheme/simpleEnrollment en de categorie guide.theme.simpleEnrollment introduceren ook een paar variabelen. Als u een thema wilt creëren dat eenvoudige inschrijving verbetert, kunt u de volgende "extra variabelen gebruiken: