Textbunden formatering av adaptiva formulärkomponenter inline-styling-of-adaptive-form-components

CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

Du kan definiera det övergripande utseendet och formatet för ett anpassat formulär genom att ange format med temaredigerare. Du kan också använda infogade CSS-format på enskilda adaptiva formulärkomponenter och förhandsgranska ändringarna direkt. Inline-format åsidosätter format som finns i temat.

Använda infogade CSS-egenskaper apply-inline-css-properties

Så här lägger du till infogade format i en komponent:

  1. Öppna formuläret i formulärredigeraren och ändra läget till formateringsläge. Om du vill ändra läge till formateringsläge trycker du på canvas-drop-down > Stil.

  2. Markera en komponent på sidan och tryck på redigeringsknappen edit-button . Stilegenskaper öppnas i sidofältet.

    Du kan också välja komponenter från formulärhierarkiträdet i sidlisten. Formulärhierarkiträdet är tillgängligt som formulärobjekt i sidlisten.

    Du kan också välja en komponent i sidofältet. I stilläget kan du se komponenter som listas under Formulärobjekt. Formulärobjektslistan i sidofältet visar dock komponenter som fält och paneler. Fält och paneler är generiska komponenter som kan innehålla komponenter som textrutor och alternativknappar.

    När du väljer en komponent i sidofältet visas alla underkomponenter i listan och egenskaperna för den markerade komponenten. Du kan markera en viss underkomponent och formatera den.

  3. Klicka på en flik i sidofältet för att ange CSS-egenskaper. Du kan ange egenskaper som:

    • Dimensioner och position (visningsinställning, utfyllnad, höjd, bredd, marginal, position, z-index, flyttal, klar, spill)
    • Text (teckensnittsfamilj, vikt, färg, storlek, radhöjd och justering)
    • Bakgrund (bild och övertoning, bakgrundsfärg)
    • Kant (bredd, stil, färg, radie)
    • Effekter (skugga, opacitet)
    • Avancerat (Gör att du kan skriva anpassad CSS för komponenten)
  4. På samma sätt kan du använda format för andra delar av en komponent, till exempel widget, bildtext och Hjälp.

  5. Tryck Klar för att bekräfta ändringarna eller Avbryt för att ignorera ändringarna.

Exempel: infogade format för en fältkomponent example-inline-styles-for-a-field-component

Följande bilder visar ett textfält före och efter att infogade format har använts på det.

Textrutekomponent innan intern formatering används

Textrutekomponent innan infogade formategenskaper används

Lägg märke till ändringen i textrutans format, så som visas i följande bild, när du har använt följande CSS-egenskaper.

Väljare
CSS-egenskap
Värde
Effekt
Fält
border

Kantbredd =2px

Kantstil=Heldragen

Kantfärg=#1111

Skapar en svart 2px bred kant runt fältet
Textruta
background-color
#6495ED

Ändrar bakgrundsfärgen till CornflowerBlue (#6495ED)

Obs! Du kan ange ett färgnamn eller dess hexadecimala kod i värdefältet.

Etikett
Mått och position > bredd
100px
Fastställer bredden som 100px för etiketten
Ikon för fälthjälp
Text > Teckenfärg
#2ECC40
Ändrar färgen på hjälpikonens ansikte.
Lång beskrivning
textjustering
centrera
Justerar den långa beskrivningen för att få hjälp att centrera

Textrutans format efter infogad formatering
Bild: Textrutekomponent efter användning av egenskaper för infogat format

Följ stegen ovan för att markera och formatera andra komponenter, till exempel paneler, skicka-knappar och alternativknappar.

NOTE
Stilegenskaperna varierar beroende på vilken komponent du väljer.
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da