Constructies voor stijlen voor adaptieve formulieren

LET OP

AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

Vereisten

Kennis van CSS en het LESS-framework.

Wat kan worden aangepast

In het artikel worden openbaar beschikbare CSS-klassen van adaptieve formulieren vermeld. U kunt deze klassen gebruiken om diverse componenten van een adaptief formulier op te maken. De opmaak van ontwerpcomponenten, zoals dialoogvensters en statusbalken met waarschuwingen, valt buiten het bereik van dit artikel. Gebruik deze opmaakconstructies alleen om stijlen te maken (met CSS of Minder) wanneer u geen stijl kunt toepassen op componenten die themaeditor.

Stijlen in aangepaste formulieren aanpassen

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:

  • Het thema wijzigen
  • Stijl van component wijzigen

Thema wijzigen

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:

  • Achtergrondkleur
  • Rand (type, kleur, dikte)
  • Lettertypekleur
  • Opvulling
  • Marge
  • Tekengrootte
  • LineHeight

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

Componentstijl wijzigen

U kunt de weergave, 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 aangepaste CSS-bestand.

Onderdelen

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

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

CSS-klasse

guideContainerNode

Beschrijving variabelen

Beschrijving variabelen

container-bgColor

Achtergrondkleur van de container

container-padding

Opvulling voor de container

container-margin

Marge voor de container

container-fontColor

Fontkleur voor de container

Veldstijl

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

CSS-klasse

guideFieldNode

Variabelen

Beschrijving

field-padding

Opvulling voor het veld

field-error-font-color

Lettertypekleur van het foutbericht van het veld

field-error-font-size

Tekengrootte van foutbericht van veld

Labelstijl

Het element HTML label gebruikt voor het veld bevat de klassen left of top afhankelijk van of het label zich boven of links bevindt.

CSS-klasse

guideFieldLabel

Variabelen

Beschrijving

label-font-color

Fontkleur voor veldlabel

label-font-size

Fontgrootte voor het veldlabel

label-line-height

 CSS-eigenschap voor regelhoogte voor het veldlabel

label-font-weight

 Eigenschappen voor CSS-lettertypegewicht voor het veldlabel

label-margin

Marge voor het veldlabel

De CSS-regels voor het label worden toegepast met behulp van de guideFieldLabel label. Als u een auteur bent, schrap deze regel om uw douaneveranderingen zichtbaar te maken.

Widget-stijl

Afhankelijk van het type, bevatten widgets ook klassen. Vaak bevatten widgets de guideFieldWidget klasse. 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.

CSS-klasse

guideFieldWidget

Variabelen

Beschrijving

widgets-bg-color

 Achtergrondkleur voor widgets (werkt niet voor selectievakje en keuzerondje)

widgets-border-color

Randkleur voor de widgets

widgets-border-thickness

Randgrootte voor de widgets

widgets-border-radius

Randstraal voor de widgets

widgets-border-type

Randtype voor de widgets

widget-border-focus-type

Focustype voor widgetranden

widgets-border

Geconsolideerde randstijl van widgets

widgets-font-color

Kleur van de tekst in de widget

widgets-font-size

Grootte van de tekst in de widget

widgets-line-height

 CSS-lijneigenschap voor de widget

widgets-padding

CSS-opvullingseigenschap voor de widget

widgets-focus-border-color

Randkleur wanneer de widget de focus heeft

widgets-mandatory-border-color

Randkleur van de widget voor de verplichte velden

widgets-mandatory-bg-color

Achtergrondkleur van de widget voor de verplichte velden

widgets-disabled-bg-color

Achtergrondkleur voor de widget wanneer het veld is uitgeschakeld

widgets-disabled-font-color

Fontkleur voor de widget wanneer het veld is uitgeschakeld

widgets-disabled-border-color

Randkleur voor de widget wanneer het veld is uitgeschakeld

widget-height

 Hoogte van de widget (werkt niet voor selectievakje en keuzerondje)

checkbutton-height

Hoogte voor selectievakje en keuzerondje.

listboxwidget-height

Maximumhoogte voor een meerkeuzevrijheid

Beperkingen in widgetstijl

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

Een auteur kan de inhoud van de Hulp in de gebieden specificeren gebruikend Korte en Lange beschrijvingscomponenten. Beide componenten hebben een gemeenschappelijke 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:

Variabelen

Beschrijving

widgets-help-long-bg-color

Achtergrondkleur van de lange Help van de widgets

widgets-help-long-border-color

Randkleur van de lange Help van de widgets

widgets-help-long-border-indicator-color

Randkleur linkerindicator van de lange Help van de widgets

widgets-help-short-bg-color

Achtergrondkleur van de korte Help van widgets

widgets-help-short-color

Fontkleur van de korte Help van de widgets

widgets-help-short-tooltip-bg-color

Achtergrondkleur van de Help van de korte knopinfo van de widgets

widgets-help-short-tooltip-color

Fontkleur van de korte Help van de knopinfo van de widgets

Voorwaarden en bepalingen

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

Variabelen

Beschrijving
tnc-unvisited Fontkleur van niet-bezochte tnc-koppeling.
tnc-visited Lettertypekleur van bezochte tnc-koppeling.

Knop

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:

  • input[type = tekst]
  • knop
  • element with class.button

HTML code voor knop:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

CSS-klasse

Beschrijving

iconButton-icon

Hiermee worden pictogrammen voor knoppen weergegeven

iconButton-label

Label/bijschrift van knop Stijlen

Variabelen

Beschrijving

button-border-size

Randgrootte voor de knoppen

button-border-type

Type rand

button-padding

CSS-opvullingseigenschap voor de knop

button-font-size

Tekengrootte voor de knop

button-background-color

Achtergrondkleur voor de knop

button-font-color

Lettertypekleur van de knop

button-border-color

Randkleur van de knop

button-large-padding

Opvulling voor de grote knoppen (knoppen met klasse .buttonlarge)

button-large-font-size

Tekengrootte voor grote knoppen

button-small-padding

Opvulling voor kleine knoppen (knoppen met klasse .buttonsmall)

button-small-font-size

Fontgrootte voor kleine knoppen

button-info-background-color

Achtergrondkleur voor informatieve knoppen (knoppen met de klasse .buttoninformative)

button-info-font-color

Fontkleur voor informatieknoppen

button-info-border-color

Randkleur voor informatieknoppen

button-warning-background-color

Achtergrondkleur voor waarschuwingsgestileerde knoppen (knoppen met waarschuwing voor klasse .buttoner)

button-warning-font-color

Fontkleur voor opgemaakte waarschuwingsknoppen

button-warning-border-color

Randkleur voor opgemaakte waarschuwingsknoppen

button-alert-background-color

Achtergrondkleur voor waarschuwingsknoppen (knoppen met waarschuwing voor klasse .buttoner)

button-alert-font-color

Fontkleur voor waarschuwingsknoppen

button-alert-border-color

Randkleur voor waarschuwingsknoppen

Vraagteken

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.

CSS-klasse

guideHelpQuestionMark

Variabelen

Beschrijving

questionmark-font-color

Kleur van het pictogram

questionmark-hover-font-color

Kleur van het pictogram wanneer de muis erop wordt geplaatst

Tabel

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

Variabelen

Beschrijving

table-header-bg-color

Achtergrondkleur voor de koptekstrij. De standaardwaarde is #333.

table-odd-row-bg-color

Achtergrondkleur voor de oneven tekstrij. De standaardwaarde is rgb(255, 255, 255).

table-even-row-bg-color

Achtergrondkleur voor de even tekstrij. De standaardwaarde is #eee.

Bestandsbijlage

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

Variabelen

Beschrijving

fileItemPadding

Opvulling voor de bestanden die worden weergegeven in de widget

fileItemBackground

Achtergrondkleur voor het bestanditem

fileItemBorderColor

Randkleur voor de bovenrand

fileItemColor

Lettertypekleur voor het bestandstitem

filePreviewIconColor

Kleur voor het voorvertoningspictogram (Bootstrap-pictogram) in de widget

fileItemCommentHeight

Hoogte van de opmerking voor het bestandstitem

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

Naviagator

CSS-klasse

Accordion

.accordeonnavigators

tabs on the left

.tab-navigators-vertical

tabs on the top

.tab-navigators

Wizard

.wizard-navigators

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

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

U kunt de opmaak van de navigator wijzigen met CSS-regels die de elementen selecteren met afstammeling kiezers. 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.

CSS-klasse

Beschrijving

nested_true

Tabnavigators (links en boven) met geneste/onderliggende/subnavigators

nested_false

Tabnavigatoren (links en boven) zonder geneste/onderliggende/subnavigators

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

CSS-klasse

guideNavIcon
OPMERKING

U kunt het pictogram voor een bepaalde navigator wijzigen door een CSS-klasse op te geven in het deelvenster tijdens het ontwerpen, bijvoorbeeld <class_name>. U voegt een <class_name>_nav voor het pictogram van de navigator.

Variabelen

Beschrijving

Tabnavigatoren

navigator-bg-color

Achtergrondkleur voor de gehele tabnavigator

tabs-bg-color

Achtergrondkleur voor de tab

tabs-font-color

Fontkleur voor tab

tabs-hover-bg-color

Achtergrondkleur voor tab bij aanwijzen

tabs-hover-font-color

Fontkleur voor tab bij aanwijzen

tabs-active-bg-color

Achtergrondkleur wanneer het deelvenster de focus heeft (actief)

tabs-active-font-color

Fontkleur wanneer het deelvenster de focus heeft

tabs-completed-bg-color

Achtergrondkleur wanneer de voltooiingsexpressie van het deelvenster true retourneert

tabs-completed-font-color

Fontkleur wanneer de voltooiingsexpressie van het deelvenster true retourneert

tabs-stepped-bg-color

 Achtergrondkleur wanneer het deelvenster één keer de focus heeft maar de voltooiingsexpressie false retourneert

tabs-stepped-font-color

 Fontkleur wanneer het deelvenster één keer de focus heeft maar de voltooiingsexpressie false retourneert

tabs-border-color

Randkleur voor de tab

tabs-font-size

Fontgrootte voor de tab

tabs-padding

Opvulling voor de tab

tabs-margin

Marge voor het tabblad

tabs-vertical-margin

Marge voor de verticale tabbladen

tabs-border-thickness

Randgrootte voor de tabbladen

tabs-min-height

Minimumhoogte van de tabbladen

heirarichal-indent

Inspringing voor de geneste tabbladen

Wizard Navigators

wizard-navigator-bg-color

 Achtergrondkleur voor volledige wizardnavigator

wizard-tabs-bg-color

Achtergrondkleur voor de wizard

wizard-tabs-font-color

Fontkleur voor de wizard

wizard-tabs-active-bg-color

Achtergrondkleur wanneer het deelvenster de focus heeft (actief)

wizard-tabs-active-font-color

Fontkleur wanneer de focus op het deelvenster is gericht

wizard-tabs-completed-bg-color

Achtergrondkleur wanneer de voltooiingsexpressie van het deelvenster true retourneert

wizard-tabs-completed-font-color

Fontkleur wanneer de voltooiingsexpressie van het deelvenster true retourneert

wizard-tabs-stepped-bg-color

 Achtergrondkleur wanneer het deelvenster één keer de focus heeft maar de voltooiingsexpressie false retourneert

wizard-tabs-stepped-font-color

Fontkleur wanneer het deelvenster één keer de focus heeft maar als de voltooiingsexpressie false retourneert

wizard-tabs-border-color

Kleur voor de wizard

wizard-tabs-font-size

Fontgrootte voor de wizard

wizard-tabs-padding

Opvulling voor de wizard

wizard-tabs-border-thickness

Randgrootte voor de wizard

wizard-nav-bullet-border

Randkleur van het navigatoropsommingsteken van de wizard (bijschrift/label vooraf bevestigen)

wizard-progress-bg-color

Achtergrondkleur van de voortgangsbalk van de wizard Navigator

wizard-progress-color

Vulkleur voor de voortgangsbalk

Accordeonnavigatoren

accordion-tabs-padding

Opvulling voor accordeon

Opmaak voor deelvensters

Een deelvenster bevat een optionele werkbalk en de bijbehorende inhoud.

CSS-klasse

guidePanelNode

Variabelen

Beschrijving

panel-background-color

Achtergrondkleur voor deelvenster

panel-font-size

Tekengrootte voor de deelvenstertekst

panel-font-color

Lettertypekleur voor de deelvenstertekst

panel-padding

Opvulling binnen het deelvenster

panel-description-font-size

Fontgrootte van paneelbeschrijving

panel-description-padding

Opvulling van de beschrijving van het deelvenster

panel-help-bg-color

Achtergrondkleur voor Help van deelvenster

panel-help-border-indicator-color

Indicator randkleur voor de hulp van het paneel

Het knooppunt van het deelvenster is onderverdeeld in navigators en inhoud. Daar is geen afzonderlijke stijlcomponent voor de inhoud. De beschreven variabelen worden zowel op de navigator als op de inhoud toegepast.

*Het bovenste deelvenster (RootPanel) heeft deze klasse niet.

Mobiele stijl

Kopbalk

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

CSS-klasse

guide-header-bar

Variabelen

Beschrijving

headerbar-background-color

Achtergrondkleur voor de koptekstbalk

headerbar-font-color

Fontkleur voor de tekst in de koptekstbalk

headerbar-padding

Opvulling voor koptekstbalk

Schuifindicator

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.

CSS-klasse

mobileScrollIndicator

Variabelen

Beschrijving

scrollIndicatorBottom

Vaste positie van schuifindicator vanaf onderkant

scrollIndicatorRight

Vaste positie van schuifindicator van rechts

scrollIndicatorWidth

Breedte van schuifindicator

scrollIndicatorHeight

Hoogte van schuifindicator

Mobiele vaste werkbalkspecifieke variabelen

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

CSS-klasse

mobileToolbar

Variabelen

Beschrijving

mobileToolbarBottom

Vaste positie van werkbalk, op mobiel apparaat, van onderkant

mobileToolbarTop

Vaste positie van werkbalk op mobiel apparaat, van boven naar boven

mobileToolbarLeft

Vaste positie van werkbalk, op mobiel apparaat, van links

mobileToolbarRight

Vaste positie van werkbalk, op mobiel apparaat, van rechts

mobileButtonIconTopMargin

Vaste positie van pictogram knoppen van werkbalk, van boven

mobileButtonIconWidth

Breedte van pictogram knoppen van werkbalk op mobiel apparaat

mobileButtonIconHeight

Hoogte van knoppen op mobiele apparaten

mobilefixedtoolbarbgcolor

Achtergrondkleur van werkbalk op mobiel apparaat

Op deze pagina