Stile in linea dei componenti del modulo adattivo inline-styling-of-adaptive-form-components
L’Adobe consiglia di utilizzare l’acquisizione dati moderna ed estensibile Componenti coreper creazione di un nuovo Forms adattivoo 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.
È 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 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:
-
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 > Stile.
-
Seleziona un componente nella pagina e fai clic sul pulsante Modifica . 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.
In Stile In questa modalità, 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.
-
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, cancellazione, riversamento)
- 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)
-
Allo stesso modo, potete applicare stili ad altre parti di un componente, ad esempio Widget, Didascalia, e Aiuto.
-
Seleziona Fine per confermare le modifiche o Annulla per ignorare le modifiche.
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 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.
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.
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 Stile , seleziona il componente e fai clic sull’icona Copia. .
Seleziona l’altro componente dello stesso tipo e fai clic sull’icona Incolla per incollare lo stile copiato. È inoltre possibile selezionare l'icona Cancella stile 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: Focus, Disabilitato, Passaggio del mouse, Errore, Completato, e Obbligatorio.
Per definire lo stile per uno stato di un componente:
-
In Stile , seleziona il componente e fai clic sull’icona Modifica. .
-
Seleziona lo stato del componente utilizzando Stato elenco a discesa.
-
Definisci lo stile per lo stato selezionato del componente e seleziona per salvare le proprietà.
È inoltre possibile simulare gli stati di esito positivo e di errore. Seleziona l’icona Espandi per visualizzare Simula esito positivo e Simula errore opzioni.
Consulta anche see-also
- Creare un modulo adattivo di AEM
- Aggiungere un modulo adattivo AEM a una pagina AEM Sites
- Applicare i temi a un modulo adattivo AEM
- Aggiungere componenti a un modulo adattivo di AEM
- Utilizzare il CAPTCHA in un modulo adattivo AEM
- Generare la versione PDF (DoR) di un modulo adattivo AEM
- Tradurre un modulo adattivo di AEM
- Abilitare Adobe Analytics per un modulo adattivo per tenere traccia dell’utilizzo dei moduli
- Collegare un modulo adattivo a Microsoft SharePoint
- Collegare un modulo adattivo a Microsoft Power Automate
- Collegare un modulo adattivo a Microsoft OneDrive
- Collegare un modulo adattivo all’archiviazione BLOB di Microsoft Azure
- Collegare un modulo adattivo a Salesforce
- Utilizzare Adobe Sign in un modulo adattivo di AEM
- Aggiungere una nuova lingua per un modulo adattivo
- Inviare dati del modulo adattivo a un database
- Inviare dati del modulo adattivo a un endpoint REST
- Inviare dati del modulo adattivo al flusso di lavoro di AEM
- Utilizzare il portale dei moduli per elencare moduli adattivi di AEM su un sito web di AEM