Costrutti di stile per i moduli adattivi styling-constructs-for-adaptive-forms

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.

Prerequisiti prerequisites

Conoscenza del CSS e del framework LESS.

Cosa può essere personalizzato what-can-be-customized

Nell’articolo sono elencate le classi css di moduli adattivi disponibili al pubblico. È possibile utilizzare queste classi per assegnare stili a vari componenti di un modulo adattivo. Lo stile dei componenti di authoring, come le finestre di dialogo e le barre di stato che visualizzano gli avvisi, esula dall’ambito di questo articolo. Utilizza questi costrutti di stile per creare stili (utilizzando CSS o meno) solo quando non sei in grado di assegnare stili ai componenti utilizzando editor temi.

Personalizzazione degli stili nei moduli adattivi customizing-styles-in-adaptive-forms

Il framework LESS semplifica il caso d’uso per personalizzare gli stili nei moduli adattivi. Il framework consente di definire gli stili utilizzando un set di variabili e funzioni (mixin). Il framework LESS consente di ridurre le dimensioni del codice in bundle e di aumentarne la riutilizzabilità.

Puoi personalizzare gli stili dei moduli adattivi nei seguenti modi:

  • Modificare il tema
  • Modificare lo stile del componente

Modifica del tema changing-theme

Puoi modificare il tema di un modulo adattivo per assicurarti che il suo aspetto sia coerente con le pagine web in cui il modulo adattivo è incorporato.

Le modifiche dell’aspetto generale del modulo adattivo che utilizzano proprietà CSS fanno generalmente parte delle modifiche al tema. Le modifiche principali dell’espressione "ok and feel" del modulo adattivo, come le modifiche di layout e posizionamento dei componenti, non sono considerate modifiche del tema.

In base al bootstrap, il seguente insieme di proprietà CSS definisce il tema di una pagina web:

  • Colore sfondo
  • Bordo (tipo, colore, spessore)
  • Colore carattere
  • Riempimento
  • Margine
  • Dimensione font
  • LineHeight

Attualmente, le variabili LESS sono definite solo per queste proprietà dei vari elementi in un modulo adattivo.

Modifica dello stile del componente changing-component-style

Potete modificare l'aspetto, il layout, il posizionamento e la visibilità degli elementi. Per eseguire questa operazione, crea o aggiorna i file .css personalizzati per includere i costrutti di stile elencati in questo articolo.

Per applicare uno stile a un modulo adattivo, apri il modulo adattivo in per la modifica, apri le proprietà del contenitore per moduli adattivi e specifica il percorso del file CSS personalizzato nella scheda di base. Costrutti di stile predefiniti del modulo adattivo e sostituiti con i costrutti elencati nel file .css personalizzato.

Componenti components

I componenti discussi in questo articolo hanno le loro classi CSS predefinite. Puoi modificare le variabili per modificare gli stili nelle classi CSS. In alternativa, è possibile riscrivere l'intera classe. Questa sezione descrive le classi all’interno dei componenti e degli stili che è possibile modificare utilizzando le variabili.

Stile contenitore container-styling

Un contenitore è il componente di livello principale. Altri pannelli e campi si trovano sotto il componente contenitore.

Classe CSS
guideContainerNode
Descrizione variabili
Descrizione variabili
container-bgColor
Colore di sfondo del contenitore
container-padding
Spaziatura per il contenitore
container-margin
Margine per il contenitore
container-fontColor
Colore font per il contenitore

Stile dei campi field-styling

I moduli adattivi includono vari tipi di campi. Ogni campo ha un nome di classe univoco, che è il nome del campo. Il campo ha anche un nome di classe comune guideFieldNode.

I campi includono etichette, widget, descrizioni della Guida (descrizione lunga e breve) e icone della Guida in linea (punto interrogativo).

Classe CSS
guideFieldNode
Variabili
Descrizione
field-padding
Spaziatura per il campo
field-error-font-color
Colore font del messaggio di errore del campo
field-error-font-size
Dimensione font del messaggio di errore del campo

Stile etichetta label-styling

L’elemento HTML etichetta utilizzato per il campo include le classi left o top a seconda che l’etichetta sia in alto o a sinistra.

Classe CSS
guideFieldLabel
Variabili
Descrizione
label-font-color
Colore font per l’etichetta del campo
label-font-size
Dimensione font per l’etichetta del campo
label-line-height
Proprietà altezza riga CSS per l'etichetta del campo
label-font-weight
Proprietà spessore font CSS per l’etichetta del campo
label-margin
Margine per l’etichetta del campo

Le regole CSS per l’etichetta vengono applicate utilizzando guideFieldLabel etichetta. Se sei un autore, sovrascrivi questa regola per rendere visibili le modifiche personalizzate.

Stile widget widgets-styling

A seconda del tipo, i widget includono anche classi. Di solito, i widget includono guideFieldWidget classe. I widget forniti con HTML normalmente utilizzano l’input e la selezione standard dell’elemento HTML. Lo stile viene eseguito di conseguenza. Non è possibile assegnare uno stile a un widget personalizzato modificando le variabili.

Classe CSS
guideFieldWidget
Variabili``
Descrizione
widgets-bg-color
Colore di sfondo per i widget (non funziona per la casella di controllo e il pulsante di opzione)
widgets-border-color
Colore del bordo per i widget
widgets-border-thickness
Dimensione del bordo per i widget
widgets-border-radius
Raggio del bordo per i widget
widgets-border-type
Tipo di bordo per i widget
widget-border-focus-type
Tipo di stato attivo per i bordi del widget
widgets-border
Stile bordo consolidato dei widget
widgets-font-color
Colore del testo all’interno del widget
widgets-font-size
Dimensione del testo all'interno del widget
widgets-line-height
Proprietà CSS lineheight per il widget
widgets-padding
Proprietà di spaziatura interna CSS per il widget
widgets-focus-border-color
Colore del bordo quando il widget è attivo
widgets-mandatory-border-color
Colore del bordo del widget per i campi obbligatori
widgets-mandatory-bg-color
Colore di sfondo del widget per i campi obbligatori
widgets-disabled-bg-color
Colore di sfondo per il widget quando il campo è disattivato
widgets-disabled-font-color
Colore font per il widget quando il campo è disattivato
widgets-disabled-border-color
Colore bordo per il widget quando il campo è disattivato
widget-height
Altezza del widget (non funziona per la casella di controllo e il pulsante di opzione)
checkbutton-height
Altezza della casella di controllo e del pulsante di opzione.
listboxwidget-height
Altezza massima per un elenco a discesa a selezione multipla

Limitazioni nello stile dei widget limitations-in-widget-styling

Lo stile dei campi attivati, obbligatori e disattivati è limitato utilizzando le variabili. Tuttavia, è possibile modificarlo ignorando gli stili. Le restrizioni che utilizzano le variabili sono fornite principalmente per mantenere sotto controllo il numero di variabili. La restrizione può essere attenuata se l'aspetto di un campo cambia drasticamente perché si trova in uno qualsiasi degli stati discussi in precedenza.

Descrizione della guida help-description

Un autore può specificare il contenuto della Guida nei campi utilizzando i componenti di descrizione breve e lunga. Entrambi i componenti hanno una classe comune .guideHelpDescription e un'altra classe .long/ .short, a seconda del tipo di descrizione. Il contenuto della Guida è racchiuso in un elemento paragrafo per ignorare lo stile della descrizione. La descrizione della Guida (sia lunga che breve) viene modificata utilizzando le variabili che iniziano con widgetshelp, come indicato nella tabella seguente:

Variabili
Descrizione
widgets-help-long-bg-color
Colore di sfondo della Guida lunga dei widget
widgets-help-long-border-color
Colore del bordo della Guida lunga dei widget
widgets-help-long-border-indicator-color
Colore bordo indicatore sinistro della Guida lunga dei widget
widgets-help-short-bg-color
Colore di sfondo della Guida breve dei widget
widgets-help-short-color
Colore font della Guida breve dei widget
widgets-help-short-tooltip-bg-color
Colore di sfondo della descrizione breve dei widget Guida
widgets-help-short-tooltip-color
Colore font della descrizione breve dei widget Guida

Termini e condizioni terms-and-conditions

I Termini e Condizioni (TnC ``) consente di specificare termini e condizioni. È possibile personalizzare il widget utilizzando le variabili descritte nella tabella seguente.

Variabili
Descrizione
tnc-unvisited
Colore font del collegamento tnc non visitato.
tnc-visited
Colore font del collegamento tnc visitato.

Pulsante button

I pulsanti sono anche widget. Tuttavia, il loro stile è leggermente diverso dai widget. Nei moduli adattivi, costituisce un pulsante uno dei seguenti elementi:

  • input[type = text]
  • pulsante
  • element con classe .button

Codice HTML per pulsante:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

Classe CSS
Descrizione
iconButton-icon
Icone per pulsante
iconButton-label
Etichetta/didascalia pulsante Stili
Variabili``
Descrizione
button-border-size
Dimensione del bordo per i pulsanti
button-border-type
Tipo di bordo
button-padding
Proprietà di spaziatura interna CSS per il pulsante
button-font-size
Dimensione font per il pulsante
button-background-color
Colore di sfondo per il pulsante
button-font-color
Colore font del pulsante
button-border-color
Colore del bordo del pulsante
button-large-padding
Spaziatura per i pulsanti grandi (pulsanti con classe .buttonlarge)
button-large-font-size
Dimensione carattere per pulsanti grandi
button-small-padding
Spaziatura per i pulsanti piccoli (pulsanti con classe .buttonsmall)
button-small-font-size
Dimensione carattere per pulsanti piccoli
button-info-background-color
Colore di sfondo per i pulsanti informativi (pulsanti con classe .buttoninformative)
button-info-font-color
Colore font per pulsanti informativi
button-info-border-color
Colore del bordo per i pulsanti informativi
button-warning-background-color
Colore di sfondo per i pulsanti con stile di avviso (pulsanti con classe buttonwarning)
button-warning-font-color
Colore del carattere per i pulsanti con stili di avviso
button-warning-border-color
Colore del bordo per i pulsanti con stile di avviso
button-alert-background-color
Colore di sfondo per i pulsanti di avviso (pulsanti con classe buttonalert)
button-alert-font-color
Colore font per i pulsanti di avviso
button-alert-border-color
Colore del bordo per i pulsanti di avviso

Punto interrogativo question-mark

Per i widget, un punto interrogativo viene visualizzato quando un autore aggiunge una descrizione lunga nel contenuto della Guida. Viene utilizzata l'icona predefinita fornita in bootstrap. Per utilizzare un'icona personalizzata, è possibile personalizzare le icone di avvio.

Classe CSS
guideHelpQuestionMark
Variabili
Descrizione
questionmark-font-color
Colore dell’icona
questionmark-hover-font-color
Colore dell'icona quando si passa il mouse su di essa

Tabella table

È possibile modificare il tema del colore per le righe di intestazione e corpo di una tabella utilizzando le seguenti variabili.

Variabili
Descrizione
table-header-bg-color
Colore di sfondo per la riga di intestazione. Il valore predefinito è #333.
table-odd-row-bg-color
Colore di sfondo per la riga del corpo dispari. Il valore predefinito è rgb(255, 255, 255).
table-even-row-bg-color
Colore di sfondo per la riga del corpo uniforme. Il valore predefinito è #eee.

Allegato file file-attachment

Il widget File allegato dei moduli adattivi consente di caricare i file. Puoi anche personalizzare il widget utilizzando le variabili.

Variabili
Descrizione
fileItemPadding
Spaziatura per i file visualizzati nel widget
fileItemBackground
Colore di sfondo per l'elemento file
fileItemBorderColor
Colore del bordo superiore
fileItemColor
Colore del carattere per l'elemento file
filePreviewIconColor
Colore per l'icona Anteprima (icona Bootstrap) nel widget
fileItemCommentHeight
Altezza del commento per l'elemento file

Stili navigatore navigator-styles

Sono disponibili quattro tipi di schede del navigatore. Queste includono le schede a sinistra, in alto, nella procedura guidata e nel Pannello a soffietto. Ogni navigatore ha una classe diversa.

Navigatore
Classe CSS
Accordion
.pannello di navigazione a soffietto
tabs on the left
.tab-navigators-vertical
tabs on the top
.tab-navigators
Wizard
.wizard-navigators

Di seguito è riportato il codice HTML per l'elemento tab navigator (simile alle schede bootstrap):

<li>

<a>tab title</a>

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></code>

........................... repeatable buttons, if the repeatable configuration is set ................................

<div class = "repeatableButtons">

<button name="Add" class="Add"/>

<button name="Remove" class="Remove"/>

</div>

</a>

</div>

................................ panel content ..................................

</div>

</div>

È possibile modificare lo stile del navigatore utilizzando le regole CSS che selezionano gli elementi utilizzando discendente selettori. Ad esempio, per aggiungere uno stile di decorazione del testo al tag di ancoraggio:

Navigatore schede in alto:

.tab-navigators

li a {

text-decoration:

underline;

}

Tab navigator on left:

.tab-navigators-vertical

li a {

text-decoration:

underline;

}

Accordion navigator:

.accordion-navigators .guideHeader a .guideSummary {

text-decoration:

underline;

}

Wizard navigator:

.wizard-navigators

li a {

text-decoration:

underline;

}

Inoltre, esistono classi per assegnare uno stile ai navigatori delle schede (sia a sinistra che in alto) a seconda che dispongano di navigatori nidificati/secondari/secondari.

Classe CSS
Descrizione
nested_true
Navigatori a schede (a sinistra e in alto) con navigatori nidificati/secondari/secondari
nested_false
Navigatori a schede (a sinistra e in alto) privi di navigatori nidificati/secondari/secondari

La classe guideNavIcon fornisce un'icona predefinita per i navigatori delle schede (sia a sinistra che in alto) e i navigatori delle procedure guidate.

Classe CSS
guideNavIcon
NOTE
Per modificare l’icona di un particolare navigatore, fornisci una classe CSS nel pannello in authoring, esempio di modulo <class_name>. Aggiungi un <class_name>_nav per l'icona del navigatore.
Variabili
Descrizione
Navigatori schede
navigator-bg-color
Colore di sfondo per l'intero navigatore schede
tabs-bg-color
Colore di sfondo per la scheda
tabs-font-color
Colore carattere per la scheda
tabs-hover-bg-color
Colore di sfondo per la scheda al passaggio del mouse
tabs-hover-font-color
Colore carattere per la scheda al passaggio del mouse
tabs-active-bg-color
Colore di sfondo quando il pannello è a fuoco (attivo)
tabs-active-font-color
Colore del font quando il pannello è attivo
tabs-completed-bg-color
Colore di sfondo quando l’espressione di completamento del pannello restituisce true
tabs-completed-font-color
Colore del font quando l’espressione di completamento del pannello restituisce true
tabs-stepped-bg-color
Colore di sfondo quando il pannello è stato attivato una volta ma l’espressione di completamento restituisce false
tabs-stepped-font-color
Colore del font quando il pannello è stato attivato una volta ma l’espressione di completamento restituisce false
tabs-border-color
Colore del bordo della scheda
tabs-font-size
Dimensione font per la scheda
tabs-padding
Spaziatura per la scheda
tabs-margin
Margine per la scheda
tabs-vertical-margin
Margine per le schede verticali
tabs-border-thickness
Dimensione del bordo delle schede
tabs-min-height
Altezza minima delle schede
heirarichal-indent
Rientro per le schede nidificate
Navigatori procedura guidata
wizard-navigator-bg-color
Colore di sfondo per l'intero navigatore della procedura guidata
wizard-tabs-bg-color
Colore di sfondo per la procedura guidata
wizard-tabs-font-color
Colore font per la creazione guidata
wizard-tabs-active-bg-color
Colore di sfondo quando il pannello è a fuoco (attivo)
wizard-tabs-active-font-color
Colore del font quando il pannello è attivo (attivato)
wizard-tabs-completed-bg-color
Colore di sfondo quando l’espressione di completamento del pannello restituisce true
wizard-tabs-completed-font-color
Colore del font quando l’espressione di completamento del pannello restituisce true
wizard-tabs-stepped-bg-color
Colore di sfondo quando il pannello è stato attivato una volta ma l’espressione di completamento restituisce false
wizard-tabs-stepped-font-color
Colore del font quando il pannello è stato attivato una volta ma l’espressione di completamento restituisce false
wizard-tabs-border-color
Colore per la procedura guidata
wizard-tabs-font-size
Dimensione font per la creazione guidata
wizard-tabs-padding
Spaziatura per la creazione guidata
wizard-tabs-border-thickness
Dimensione del bordo per la procedura guidata
wizard-nav-bullet-border
Colore del bordo del punto elenco del navigatore della procedura guidata (prefisso didascalia/etichetta)
wizard-progress-bg-color
Colore di sfondo della barra di avanzamento del navigatore della procedura guidata
wizard-progress-color
Colore di riempimento per la barra di avanzamento
Navigatori Accordion
accordion-tabs-padding
Spaziatura per pannello a soffietto

Stile del pannello panel-styling

Un pannello include una barra degli strumenti facoltativa e il relativo contenuto.

Classe CSS
guidePanelNode
Variabili
Descrizione
panel-background-color
Colore di sfondo per il pannello
panel-font-size
Dimensione font per il testo del pannello
panel-font-color
Colore font per il testo del pannello
panel-padding
Spaziatura all’interno del pannello
panel-description-font-size
Dimensione font della descrizione del pannello
panel-description-padding
Riempimento della descrizione del pannello
panel-help-bg-color
Colore di sfondo per la guida del pannello
panel-help-border-indicator-color
Colore del bordo indicatore per la guida del pannello

Il nodo del pannello è diviso in navigatori e contenuti. Lì ``non è un componente di stile separato per il contenuto. Le variabili descritte vengono applicate al navigatore e al contenuto.

Il pannello più in alto (RootPanel) non ha questa classe.

Stile mobile mobile-styling

Barra intestazione header-bar

Queste variabili influenzano la barra dell’intestazione visibile su un dispositivo mobile o su dispositivi a schermo ridotto contenenti il titolo del pannello e i navigatori avanti e indietro.

Classe CSS
guide-header-bar
Variabili
Descrizione
headerbar-background-color
Colore di sfondo per la barra dell’intestazione
headerbar-font-color
Colore font per il testo all’interno della barra dell’intestazione
headerbar-padding
Spaziatura per barra intestazione

Indicatore di scorrimento scroll-indicator

Queste variabili influenzano l'indicatore di scorrimento, che è una freccia arancione visualizzata su un dispositivo mobile o su dispositivi con schermo piccolo. Un indicatore di scorrimento indica che è presente contenuto oltre la parte visibile dello schermo. Puoi scorrere verso il basso per vederlo. Quando si preme la fine del contenuto, la freccia scompare.

Classe CSS
mobileScrollIndicator
Variabili
Descrizione
scrollIndicatorBottom
Posizione fissa dello scrollindicator dal basso
scrollIndicatorRight
Posizione fissa dello scorrimento da destra
scrollIndicatorWidth
Larghezza indicatore di scorrimento
scrollIndicatorHeight
Altezza indicatore di scorrimento

Variabili specifiche del layout della barra degli strumenti fissa mobile mobile-fixed-toolbar-layout-specific-variables

Queste variabili nella tabella seguente influenzano il layout della barra degli strumenti mobile fissa.

Classe CSS
mobileToolbar
Variabili
Descrizione
mobileToolbarBottom
Posizione fissa della barra degli strumenti, su dispositivo mobile, dal basso
mobileToolbarTop
Posizione fissa della barra degli strumenti, su dispositivo mobile, dall'alto
mobileToolbarLeft
Posizione fissa della barra degli strumenti, su dispositivo mobile, da sinistra
mobileToolbarRight
Posizione fissa della barra degli strumenti, su dispositivo mobile, da destra
mobileButtonIconTopMargin
Posizione fissa dell'icona dei pulsanti della barra degli strumenti, dall'alto
mobileButtonIconWidth
Larghezza dell'icona dei pulsanti della barra degli strumenti sul dispositivo mobile
mobileButtonIconHeight
Altezza dell'icona dei pulsanti della barra degli strumenti sul dispositivo mobile
mobilefixedtoolbarbgcolor
Colore di sfondo della barra degli strumenti sul dispositivo mobile

Variabile specifica per il tema theme-specific-variable

Il Iscrizione semplice theme in /etc/clientlibs/fd/af/guidetheme/simpleEnrollment e la categoria guide.theme.simpleEnrollment introduce anche alcune variabili. Se desideri creare un’iscrizione semplice per l’ottimizzazione del tema, puoi utilizzare le seguenti "variabili aggiuntive:

Variabili
Descrizione
button-focus-bg-color
Colore di sfondo per il pulsante attivo
button-hover-bg-color
Colore di sfondo per il pulsante al passaggio del mouse
button-radius
Raggio del pulsante
navigation-button-bg-color
Colore di sfondo per i pulsanti di navigazione (indietro/avanti)
navigation-button-bg-hover-color
Colore di sfondo per i pulsanti di navigazione (indietro/avanti) al passaggio del mouse
initial-nav-color
Colore di sfondo per i navigatori della procedura guidata e barra di avanzamento corrispondente, al primo rendering.
active-nav-color
Colore di sfondo per il navigatore della procedura guidata corrente/attivo e barra di avanzamento corrispondente
visited-nav-color
Colore di sfondo per i navigatori della procedura guidata e barra di avanzamento corrispondente, che sono stati visitati.
tabs-bifercating-border-color
Colore del bordo che suddivide il contenitore in navigatori e pannello
tabs-navigator-separator-color
Colore bordo inferiore che separa le schede a sinistra (navigatori schede).
tabs-child-nav-bg-color
Colore di sfondo per i navigatori nidificati/secondari/secondari del navigatore
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2