Textbunden formatering av adaptiva formulärkomponenter

Senaste uppdatering: 2023-10-30
  • Skapat för:
  • Intermediate
    User

Adobe rekommenderar att man använder modern och utbyggbar datainhämtning Kärnkomponenter for skapa ny Adaptive Forms eller lägga till adaptiv 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.

Version Artikellänk
AEM 6.5 Klicka här
AEM as a Cloud Service Den här artikeln

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

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 > Style.

  2. Markera en komponent på sidan och tryck på knappen Redigera 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.

    I Style I visas komponenterna 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 från 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:

    • Dimensions & Position (Visningsinställning, utfyllnad, höjd, bredd, marginal, position, z-index, flyttal, klar, spill)
    • Text (Teckensnittsfamilj, vikt, färg, storlek, radhöjd och justering)
    • Background (Bild och övertoning, bakgrundsfärg)
    • Border (Bredd, stil, färg, radie)
    • Effects (Skugga, Opacitet)
    • Advanced (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, som Widget, Captionoch Help.

  5. Tryck Done för att bekräfta ändringarna eller Cancel för att ignorera ändringarna.

Exempel: textbundna format för en fältkomponent

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, 2 pixlar 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

Dimensioner 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

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.

OBSERVERA

Stilegenskaperna varierar beroende på vilken komponent du väljer.

Kopiera och klistra in format

Du kan också kopiera och klistra in en stil från en komponent till en annan i ett adaptivt formulär. I Style trycker du på komponenten och trycker på ikonen Kopiera Kopiera.

Tryck på den andra komponenten av samma typ och tryck på ikonen Klistra in Kopiera om du vill klistra in det kopierade formatet. Du kan också trycka på ikonen Rensa stil Kopiera om du vill ta bort det använda formatet.

Ange format för olika lägen i en komponent

Du kan ange format för olika lägen för en komponenttyp. De olika lägena är: Focus, Disabled, Hover, Error, Successoch Mandatory.

Så här definierar du format för ett läge för en komponent:

  1. I Style läge, tryck på komponenten och tryck på ikonen Redigera Redigera.

  2. Välj läge för komponenten med State listruta.

    Välj läge

  3. Definiera formatet för komponentens valda läge och tryck på Spara för att spara egenskaperna.

Du kan också simulera status för lyckade och fel. Tryck på ikonen Expandera för att visa Simulate Success och Simulate Error alternativ.

Simulera lägen

Se även

På denna sida