Constructies voor stijlen voor adaptieve formulieren styling-constructs-for-adaptive-forms
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. 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 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:
- Het thema wijzigen
- Stijl van component wijzigen
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:
- 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 changing-component-style
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 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 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 widgets-styling
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 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 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 terms-and-conditions
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 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:
- input[type = tekst]
- knop
- element with class.button
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 behulp van 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>
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 panel-styling
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 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.