Constructies voor stijlen voor adaptieve formulieren

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:

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:

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.

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

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.

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.

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:

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.

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:

HTML code voor knop:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

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.

Tabel

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

Bestandsbijlage

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

Navigatorstijlen

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>

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.

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

Opmaak voor deelvensters

Een deelvenster bevat een optionele werkbalk en de bijbehorende inhoud.

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.

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.

Mobiele vaste werkbalkspecifieke variabelen

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