Textbunden formatering av adaptiva formulärkomponenter inline-styling-of-adaptive-form-components
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:
-
Ö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å
-
Markera en komponent på sidan och tryck på 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.
-
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 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.
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.