Textbunden formatering av adaptiva formulärkomponenter inline-styling-of-adaptive-form-components
Adobe rekommenderar att du använder den moderna och utbyggbara datainhämtningen Core Componentsför att skapa nya adaptiva Formseller att lägga till adaptiva Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs det äldre sättet att skapa Adaptiv Forms med baskomponenter.
Du kan definiera det övergripande utseendet och formatet för ett anpassat formulär genom att ange format med temaredigeraren. 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:
-
Öppna formuläret i formulärredigeraren och ändra läget till formateringsläge. Om du vill ändra läge till formateringsläge väljer du
-
Markera en komponent på sidan och markera redigeringsknappen
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.
-
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)
-
På samma sätt kan du använda format för andra delar av en komponent, till exempel widget, bildtext och Hjälp.
-
Välj Klar för att bekräfta ändringarna eller Avbryt för att ignorera ändringarna.
Exempel: textbundna 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 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.
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.