Stile in linea dei componenti di moduli adattivi

Ultimo aggiornamento: 2023-12-04
  • Argomenti:
  • Adaptive Forms
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • User

L’Adobe consiglia di utilizzare l’acquisizione dati moderna ed estensibile Componenti core per creazione di un nuovo Forms adattivo o aggiunta di Forms adattivo alle pagine AEM Sites. Questi componenti rappresentano un progresso significativo nella creazione di Forms adattivi, garantendo esperienze utente straordinarie. Questo articolo descrive un approccio precedente all’authoring di Forms adattivi utilizzando i componenti di base.

Versione Collegamento articolo
AEM as a Cloud Service Fai clic qui
AEM 6.5 Questo articolo

È possibile definire l’aspetto e lo stile generali di un modulo adattivo specificando gli stili utilizzando editor temi. Inoltre, puoi applicare stili CSS in linea ai singoli componenti del modulo adattivo e visualizzare all’istante l’anteprima delle modifiche. Gli stili in linea sostituiscono gli stili forniti nel tema.

Applicare le proprietà CSS in linea

Per aggiungere stili in linea a un componente:

  1. Apri il modulo nell’editor moduli e cambia la modalità in modalità di stile. Per cambiare la modalità in modalità stile, nella barra degli strumenti della pagina seleziona elenco a discesa area di lavoro > Stile.

  2. Seleziona un componente nella pagina e fai clic sul pulsante Modifica edit-button. Le proprietà di stile si aprono nella barra laterale.

    Puoi anche selezionare i componenti dalla struttura gerarchica del modulo nella barra laterale. La struttura della gerarchia dei moduli è disponibile come Oggetti modulo nella barra laterale.

    Puoi anche selezionare un componente dalla barra laterale. Nella modalità Stile, è possibile visualizzare i componenti elencati in Oggetti modulo. Tuttavia, l’elenco Oggetti modulo nella barra laterale elenca componenti quali campi e pannelli. I campi e i pannelli sono componenti generici che possono contenere componenti quali caselle di testo e pulsanti di scelta.

    Quando selezioni un componente dalla barra laterale, vengono visualizzati tutti i sottocomponenti elencati e le proprietà del componente selezionato. Puoi selezionare un sottocomponente specifico e assegnargli uno stile.

  3. Fai clic su una scheda nella barra laterale per specificare le proprietà CSS. Puoi specificare proprietà quali:

    • Dimension e posizione (impostazione di visualizzazione, spaziatura interna, altezza, larghezza, margine, posizione, indice z, mobile, deflusso)
    • Testo (famiglia di caratteri, peso, colore, dimensioni, altezza della linea e allineamento)
    • Sfondo (immagine e sfumatura, colore di sfondo)
    • Bordo (larghezza, stile, colore, raggio)
    • Effetti (Ombra, Opacità)
    • Avanzate (consente di scrivere CSS personalizzati per il componente)
  4. Allo stesso modo, potete applicare stili ad altre parti di un componente, ad esempio Widget, Didascalia e Guida.

  5. Seleziona Fine per confermare le modifiche o Annulla per ignorare le modifiche.

Esempio: stili in linea per un componente campo

Le immagini seguenti rappresentano un campo di testo prima e dopo l’applicazione di stili in linea.

Componente casella di testo prima dell’applicazione dello stile in linea

Componente casella di testo prima di applicare proprietà di stile in linea

Osserva la modifica dello stile della casella di testo come mostrato nell’immagine seguente dopo l’applicazione delle seguenti proprietà CSS.

Selettore

Proprietà CSS

Valore

Effetto

Campo

bordo

Larghezza bordo = 2 px

Stile bordo=solido

Colore bordo=#1111

Crea un bordo nero largo 2 px attorno al campo

Casella di testo

background-color

#6495ED

Cambia il colore di sfondo in blu fioreCornice (#6495ED)

Nota: è possibile specificare un nome di colore o il relativo codice esadecimale nel campo valore.

Etichetta

Dimensioni e posizione > larghezza

100 px

Imposta la larghezza come 100 px per l'etichetta

Icona guida campo Testo > Colore carattere #2ECC40 Cambia il colore della faccia dell'icona della guida.

Descrizione lunga

text-align

centro

Allinea al centro la descrizione lunga della guida

Stile casella di testo dopo l'applicazione dello stile in linea

Componente casella di testo dopo l’applicazione delle proprietà di stile in linea

Seguendo i passaggi precedenti, è possibile selezionare e assegnare uno stile ad altri componenti, ad esempio pannelli, pulsanti di invio e pulsanti di scelta.

NOTA

Le proprietà di stile variano in base al componente selezionato.

In questa pagina