Inline opmaak van adaptieve formuliercomponenten inline-styling-of-adaptive-form-components
de Adobe adviseert gebruikend de moderne en verlengbare gegevens vangen Componenten van de Kernvoor het creëren van nieuwe Aangepaste Formsof 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.
U kunt de algemene verschijning en de stijl van een Aangepaste Vorm bepalen door stijlen te specificeren gebruikend themaredacteur. Bovendien kunt u inline CSS-stijlen toepassen op afzonderlijke componenten van Adaptief formulier en de wijzigingen direct bekijken. Inline stijlen overschrijven de opmaak die in het thema is opgenomen.
Inline CSS-eigenschappen toepassen apply-inline-css-properties
Inline stijlen toevoegen aan een component:
-
Open het formulier in de formuliereditor en wijzig de modus in opmaakmodus. Om de wijze aan het stileren wijze, op de paginagoolbar te veranderen, selecteer
-
Selecteer een component in de pagina, en selecteer uitgeven knoop
U kunt ook componenten selecteren in de boomstructuur van de formulierhiërarchie in het zijpaneel. De boomstructuur in de formulierhiërarchie is beschikbaar als formulierobjecten op de zijbalk.
In de modus Style kunt u componenten zien die onder Formulierobjecten worden weergegeven. In de lijst Formulierobjecten in het zijpaneel worden echter componenten zoals velden en deelvensters vermeld. Velden en deelvensters zijn algemene componenten die componenten kunnen bevatten, zoals tekstvak en keuzerondjes.
Wanneer u een component selecteert in het zijpaneel, ziet u alle vermelde subcomponenten en de eigenschappen van de geselecteerde component. U kunt een specifieke subcomponent selecteren en deze opmaken.
-
Klik op een tabblad in de zijbalk om CSS-eigenschappen op te geven. U kunt eigenschappen opgeven, zoals:
- Dimensions & Position (Weergave-instelling, opvulling, hoogte, breedte, marge, positie, z-index, zwevend, wissen, overloop)
- Text (Lettertypefamilie, dikte, kleur, grootte, lijnhoogte en uitlijning)
- Background (Afbeelding en verloop, achtergrondkleur)
- Border (Breedte, stijl, kleur, straal)
- Effects (Schaduw, dekking)
- Advanced (Hiermee kunt u aangepaste CSS voor de component schrijven)
-
Op dezelfde manier kunt u stijlen toepassen op andere delen van een component, zoals Widget , Caption en Help .
-
Selecteer Done om de wijzigingen te bevestigen of Cancel om de wijzigingen te negeren.
Voorbeeld: inline stijlen voor een veldcomponent example-inline-styles-for-a-field-component
In de volgende afbeeldingen wordt een tekstveld weergegeven voor- en nadat er inline stijlen op zijn toegepast.
Component van tekstvak voordat inline-stijleigenschappen worden toegepast
Let op de wijziging in de stijl van het tekstvak zoals wordt getoond in de volgende afbeelding na het toepassen van de volgende CSS-eigenschappen.
Component van tekstvak na toepassen van inline-stijleigenschappen
Na de bovenstaande stappen kunt u andere componenten selecteren en opmaken, zoals deelvensters, verzendknoppen en keuzerondjes.
Stijlen kopiëren en plakken copy-paste-styles
U kunt ook een stijl van de ene component naar een andere component in een adaptief formulier kopiëren en plakken. Op de Style wijze, selecteer de component en selecteer het pictogram van het Exemplaar
Selecteer de andere component van het zelfde type en selecteer het pictogram van het Deeg
Stijlen instellen voor verschillende statussen van een component set-styles-for-states
U kunt stijlen instellen voor verschillende toestanden van een componenttype. De verschillende statussen zijn: Focus, Disabled, Hover, Error, Success en Mandatory .
Stijl definiëren voor een status van een component:
-
Op de Style wijze, selecteer de component en selecteer het Edit pictogram
-
Selecteer de status voor de component met de vervolgkeuzelijst State .
-
Bepaal het stileren voor de geselecteerde staat van de component en selecteer
U kunt ook de status van succes en fout simuleren. Selecteer het pictogram Uitvouwen om de opties Simulate Success en Simulate Error weer te geven.
Zie ook see-also
- Een AEM adaptief formulier maken
- Een AEM adaptief formulier toevoegen aan de AEM Sites-pagina
- Thema's toepassen op een AEM adaptief formulier
- voegt componenten aan een AEM Aangepaste Vormtoe
- CAPTCHA gebruiken in een AEM adaptieve vorm
- PDF-versie (DoR) van een AEM adaptief formulier genereren
- Een AEM adaptief formulier vertalen
- Adobe Analytics inschakelen voor een adaptief formulier om het formuliergebruik bij te houden
- Aangepast formulier verbinden met Microsoft SharePoint
- Adaptief formulier aansluiten op Microsoft Power Automate
- Adaptief formulier aansluiten op Microsoft OneDrive
- Adaptief formulier aansluiten op Microsoft Azure Blob Storage
- Aangepast formulier verbinden met Salesforce
- Adobe Sign gebruiken in een AEM adaptief formulier
- Een nieuwe landinstelling toevoegen voor een adaptief formulier
- verzendt de Adaptieve gegevens van de Vorm naar een gegevensbestand
- Verzend AanpassingsGegevens van de Vorm naar een eindpunt REST
- Adaptieve formuliergegevens naar AEM workflow verzenden
- Forms Portal gebruiken om AEM Adaptive Forms op een AEM website weer te geven
- Versies, opmerkingen en annotaties toevoegen aan een adaptief formulier
- Adaptieve Forms vergelijken