Stile in linea dei componenti del modulo adattivo inline-styling-of-adaptive-form-components

Adobe consiglia di utilizzare l'acquisizione dati moderna ed estensibile Componenti coreper la creazione di un nuovo Forms adattivoo l'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 6.5
Fai clic qui
AEM as a Cloud Service
Questo articolo

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

Applicare le proprietà CSS in linea apply-inline-css-properties

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 stile, nella barra degli strumenti della pagina, seleziona elenco a discesa dellarea di lavoro > Stile.

  2. Selezionare un componente nella pagina, quindi selezionare il pulsante di 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.

    Nella modalità Stile, puoi 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, virgola mobile, cancella, riversamento)
    • Testo (famiglia di caratteri, peso, colore, dimensione, altezza della riga e allineamento)
    • Sfondo (immagine e sfumatura, colore di sfondo)
    • Bordo (larghezza, stile, colore, raggio)
    • Effetti (Ombreggiatura, Opacità)
    • Avanzate (consente di scrivere CSS personalizzati per il componente)
  4. Analogamente, è possibile applicare stili per altre parti di un componente, ad esempio Widget, Didascalia e Guida.

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

Esempio: stili in linea per un componente campo example-inline-styles-for-a-field-component

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

Componente casella di testo prima dellapplicazione 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 pixel 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
Dimension 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 lapplicazione 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.

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

Copiare e incollare gli stili copy-paste-styles

È inoltre possibile copiare e incollare uno stile da un componente a un altro in un modulo adattivo. In modalità Stile, seleziona il componente e l'icona Copia Copia .

Selezionare l'altro componente dello stesso tipo e l'icona Incolla Copia per incollare lo stile copiato. Puoi anche selezionare l'icona Cancella stile Copia per cancellare lo stile applicato.

Impostare stili per diversi stati di un componente set-styles-for-states

È possibile impostare stili per diversi stati di un tipo di componente. I diversi stati includono: Stato attivo, Disabilitato, Passaggio del mouse, Errore, Operazione riuscita e Obbligatorio.

Per definire lo stile per uno stato di un componente:

  1. Nella modalità Stile, seleziona il componente e l'icona Modifica Modifica .

  2. Selezionare lo stato del componente utilizzando l'elenco a discesa Stato.

    Seleziona stato

  3. Definisci lo stile per lo stato selezionato del componente e seleziona Salva per salvare le proprietà.

È inoltre possibile simulare gli stati di esito positivo e di errore. Seleziona l'icona Espandi per visualizzare le opzioni Simula esito positivo e Simula errore.

Simula stati

Consulta anche see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab