Inline opmaak van adaptieve formuliercomponenten inline-styling-of-adaptive-form-components

Adobe beveelt aan moderne en uitbreidbare gegevensvastlegging te gebruiken Kernonderdelenfor nieuwe Adaptieve Forms makenof Aangepaste Forms toevoegen aan AEM Sites-pagina's. 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.

Versie
Artikelkoppeling
AEM 6,5
Klik hier
AEM as a Cloud Service
Dit artikel

U kunt de algemene weergave en stijl van een adaptief formulier definiëren door stijlen op te geven met themaeditor. 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:

  1. Open het formulier in de formuliereditor en wijzig de modus in opmaakmodus. Als u de modus wilt wijzigen in de opmaakmodus, selecteert u op de pagina-werkbalk de optie canvas-drop-down > Style.

  2. Selecteer een component op de pagina en selecteer de knop Bewerken bewerken, knop . Stijleigenschappen worden geopend in de zijbalk.

    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 Style in de modus, kunt u de componenten onder Formulierobjecten zien. 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.

  3. 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)
  4. Op dezelfde manier kunt u stijlen toepassen op andere delen van een component, zoals Widget, Caption, en Help.

  5. Selecteren Done om de wijzigingen te bevestigen of Cancel om de wijzigingen te verwijderen.

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-opmaak wordt 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.

Kiezer
CSS-eigenschap
Waarde
Effect
Veld
border

Randbreedte =2 px

Randstijl=Effen

Randkleur=#1111

Hiermee maakt u een zwarte 2-px brede rand rond het veld
Tekstvak
background-color
#6495ED

Hiermee wijzigt u de achtergrondkleur in CornflowerBlue (#6495ED)

Opmerking: u kunt een kleurnaam of hexadecimale code opgeven in het waardeveld.

Label
Dimensionen en positie > breedte
100 px
Hiermee stelt u de breedte in op 100 px voor het label
Help-pictogram Veld
Tekst > Tekstkleur
#2ECC40
Hiermee wijzigt u de kleur van het Help-pictogram.
Lange beschrijving
text-align
midden
Lijnt de lange beschrijving voor het centreren uit

Stijl van tekstvak nadat inline-opmaak is toegepast

Component van tekstvak na toepassen van inline-stijleigenschappen

Na de bovenstaande stappen kunt u andere componenten selecteren en opmaken, zoals deelvensters, verzendknoppen en keuzerondjes.

NOTE
De stijleigenschappen variëren op basis van de component die u selecteert.

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. In de Style Selecteer de component en selecteer het pictogram Kopiëren Kopiëren .

Selecteer de andere component van hetzelfde type en selecteer het pictogram Plakken Kopiëren om de gekopieerde stijl te plakken. U kunt ook het pictogram Stijl wissen selecteren Kopiëren om de toegepaste stijl te wissen.

Stijlen instellen voor verschillende statussen van een component set-styles-for-states

U kunt stijlen instellen voor verschillende toestanden van een componenttype. De verschillende staten omvatten: Focus, Disabled, Hover, Error, Success, en Mandatory.

Stijl definiëren voor een status van een component:

  1. In de Style Selecteer de component en selecteer het pictogram Bewerken Bewerken .

  2. Selecteer de status voor de component met de opdracht State vervolgkeuzelijst.

    Status selecteren

  3. Definieer de opmaak voor de geselecteerde status van de component en selecteer Opslaan om de eigenschappen op te slaan.

U kunt ook de status van succes en fout simuleren. Selecteer het pictogram Uitvouwen om het dialoogvenster Simulate Success en Simulate Error opties.

Frames simuleren

Zie ook see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab