Costruzioni di stile per i moduli adattivi

Prerequisiti

Conoscenza del CSS e del framework LESS.

Che cosa può essere personalizzato

L'articolo elenca le classi css dei moduli adattivi disponibili al pubblico. È possibile sfruttare queste classi per assegnare uno stile a vari componenti di un modulo adattivo. Lo stile dei componenti di authoring, ad esempio finestre di dialogo e barre di stato contenenti 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 uno stile ai componenti utilizzando editor di temi.

Personalizzazione degli stili nei moduli adattivi

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 aiuta a ridurre le dimensioni del codice bundle e ne aumenta la riutilizzabilità.

Puoi personalizzare gli stili dei moduli adattivi nei seguenti modi:

  • Modificare il tema
  • Modificare lo stile del componente

Modifica del tema

È possibile modificare il tema di un modulo adattivo per assicurarne la coerenza con le pagine web in cui è incorporato il modulo adattivo.

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

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

  • Colore sfondo
  • Bordo (tipo, colore, spessore)
  • Colore font
  • Riempimento
  • immagine
  • Dimensione font
  • AltezzaLinea

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

Modifica dello stile del componente

È possibile 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 di moduli adattivi, 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

I componenti descritti 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 di componenti e stili che è possibile modificare utilizzando le variabili.

Stile del contenitore

Un contenitore è il componente di primo livello. 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 del contenitore

container-fontColor

Colore font per il contenitore

Stile del campo

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

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

Classe CSS

guideFieldNode

Variabili

Descrizione

field-padding

Spaziatura per il campo

field-error-font-color

Colore del carattere del messaggio di errore del campo

field-error-font-size

Dimensione del carattere del messaggio di errore del campo

Stile etichetta

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

Classe CSS

guideFieldLabel

Variabili

Descrizione

label-font-color

Colore del font per l’etichetta del campo

label-font-size

Dimensione del font per l’etichetta del campo

label-line-height

 Proprietà di altezza riga CSS per l’etichetta del campo

label-font-weight

 Proprietà di spessore del font CSS per l’etichetta del campo

label-margin

Margine per l’etichetta del campo

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

Stile dei widget

A seconda del tipo, i widget includono anche classi. Comunemente, i widget includono la classe guideFieldWidget . I widget che vengono forniti con HTML normalmente utilizzano l’input dell’elemento HTML standard e selezionano. Lo stile viene eseguito di conseguenza. Non puoi 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 scelta)

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 messa a fuoco per i bordi dei widget

widgets-border

Stile bordo consolidato dei widget

widgets-font-color

Colore del testo all'interno del widget

widgets-font-size

Dimensioni del testo all'interno del widget

widgets-line-height

 Proprietà CSS lineheight per il widget

widgets-padding

Proprietà di spaziatura 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 del widget quando il campo è disabilitato

widgets-disabled-font-color

Colore del carattere del widget quando il campo è disabilitato

widgets-disabled-border-color

Colore del bordo del widget quando il campo è disabilitato

widget-height

 Altezza del widget (non funziona per le caselle di controllo e i pulsanti di scelta)

checkbutton-height

Altezza della casella di controllo e del pulsante di scelta.

listboxwidget-height

Altezza massima per un menu a discesa con più selezioni

Limitazioni nello stile dei widget

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

Descrizione della Guida

Un autore può specificare il contenuto della Guida nei campi utilizzando i componenti 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 sostituire lo stile della descrizione. La descrizione della Guida (lunga e 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 breve Guida dei widget

widgets-help-short-color

Colore del carattere della breve Guida dei widget

widgets-help-short-tooltip-bg-color

Colore di sfondo della breve descrizione dei widget Aiuto

widgets-help-short-tooltip-color

Colore del carattere della breve descrizione comandi dei widget Aiuto

Condizioni d’uso

Il widget Termini e Condizioni (TnC ) consente di specificare termini e condizioni. Puoi 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

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

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

Codice HTML per il pulsante:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

Classe CSS

Descrizione

iconButton-icon

Fornisce icone per il pulsante

iconButton-label

Etichetta/didascalia pulsante Stili

Variabili

Descrizione

button-border-size

Dimensioni del bordo dei pulsanti

button-border-type

Tipo di bordo

button-padding

Proprietà di spaziatura CSS per il pulsante

button-font-size

Dimensione del carattere del pulsante

button-background-color

Colore di sfondo del pulsante

button-font-color

Colore del carattere del pulsante

button-border-color

Colore del bordo del pulsante

button-large-padding

Spaziatura per i pulsanti di grandi dimensioni (pulsanti con classe .buttonlarge)

button-large-font-size

Dimensione del carattere per i pulsanti di grandi dimensioni

button-small-padding

Spaziatura per i piccoli pulsanti (pulsanti con classe .bottonsmall)

button-small-font-size

Dimensione del carattere per i pulsanti di piccole dimensioni

button-info-background-color

Colore di sfondo per i pulsanti informativi (pulsanti con classe .buttoninformative)

button-info-font-color

Colore del carattere per i pulsanti informativi

button-info-border-color

Colore del bordo per i pulsanti informativi

button-warning-background-color

Colore di sfondo per i pulsanti con stili di avviso (pulsanti con classe .buttonwarning)

button-warning-font-color

Colore del carattere per i pulsanti con stile di avviso

button-warning-border-color

Colore del bordo per i pulsanti con stile avviso

button-alert-background-color

Colore di sfondo per i pulsanti di avviso (pulsanti con classe .buttonalert)

button-alert-font-color

Colore dei font per i pulsanti di avviso

button-alert-border-color

Colore del bordo dei pulsanti di avviso

Punto interrogativo

Per i widget, viene visualizzato un punto interrogativoMark quando un autore aggiunge una lunga descrizione nel contenuto della Guida. Viene utilizzata l'icona predefinita fornita in bootstrap. Per utilizzare un’icona personalizzata, puoi personalizzare le icone del bootstrap.

Classe CSS

guideHelpQuestionMark

Variabili

Descrizione

questionmark-font-color

Colore dell’icona

questionmark-hover-font-color

Colore dell'icona quando il mouse passa sopra di essa

Tabella

È 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 corpo dispari. Il valore predefinito è rgb(255, 255, 255).

table-even-row-bg-color

Colore di sfondo per la riga corpo pari. Il valore predefinito è #eee.

Allegato file

Il widget File allegato di moduli adattivi consente di caricare 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 del bordo superiore

fileItemColor

Colore font per l’elemento file

filePreviewIconColor

Colore dell’icona Anteprima (icona Bootstrap) nel widget

fileItemCommentHeight

Altezza del commento per l’elemento file

Sono disponibili quattro tipi di schede di navigazione. Sono disponibili schede a sinistra, in alto, nella procedura guidata e a soffietto. Ogni navigatore ha una classe diversa.

Naviagatore

Classe CSS

Accordion

navigatori a fisarmonica

tabs on the left

.tab-navigators-verticali

tabs on the top

.tab-navigators

Wizard

navigatori

Di seguito è riportato il codice HTML per l'elemento navigatore scheda (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>

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

Navigatore a 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 i navigatori a schede di stile (sia a sinistra che in alto) in base al fatto che abbiano navigatori nidificati/secondari/secondari.

Classe CSS

Descrizione

nested_true

Navigatori a schede (sinistra e superiore) con navigatori nidificati/secondari/secondari

nested_false

Navigatori schede (sinistra e superiore) privi di navigatori nidificati/secondari/secondari

La classe guideNavIcon fornisce un'icona predefinita ai navigatori a schede (sia sinistro che superiore) e ai navigatori della procedura guidata.

Classe CSS

guideNavIcon
NOTA

Puoi modificare l’icona di un particolare navigatore fornendo una classe CSS nel pannello in authoring, ad esempio <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 font per la scheda

tabs-hover-bg-color

Colore di sfondo per la scheda al passaggio del mouse

tabs-hover-font-color

Colore del carattere per la scheda al passaggio del mouse

tabs-active-bg-color

Colore di sfondo quando il pannello è 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 carattere 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 falso

tabs-stepped-font-color

 Colore del carattere quando il pannello è stato attivato una volta ma l'espressione di completamento restituisce falso

tabs-border-color

Colore del bordo della scheda

tabs-font-size

Dimensione del carattere della scheda

tabs-padding

Spaziatura per la scheda

tabs-margin

Margine della scheda

tabs-vertical-margin

Margine per le schede verticali

tabs-border-thickness

Dimensione del bordo per le schede

tabs-min-height

Altezza minima delle schede

heirarichal-indent

Rientro delle schede nidificate

Navigatori della 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 procedura guidata

wizard-tabs-active-bg-color

Colore di sfondo quando il pannello è attivo

wizard-tabs-active-font-color

Colore del carattere quando il pannello è attivo (a fuoco)

wizard-tabs-completed-bg-color

Colore di sfondo quando l’espressione di completamento del pannello restituisce true

wizard-tabs-completed-font-color

Colore del carattere quando l'espressione di completamento del pannello restituisce true

wizard-tabs-stepped-bg-color

 Colore di sfondo quando il pannello è stato messo a fuoco una volta ma l'espressione di completamento restituisce falso

wizard-tabs-stepped-font-color

Colore del carattere quando il pannello è stato attivato una volta ma l'espressione di completamento restituisce falso

wizard-tabs-border-color

Colore per la procedura guidata

wizard-tabs-font-size

Dimensione del carattere per la procedura guidata

wizard-tabs-padding

Aggiunta della creazione guidata

wizard-tabs-border-thickness

Dimensioni del bordo della procedura guidata

wizard-nav-bullet-border

Colore del bordo del punto elenco del navigatore della procedura guidata (predefinizione della didascalia/etichetta)

wizard-progress-bg-color

Colore di sfondo della barra di avanzamento del navigatore guidato

wizard-progress-color

Colore di riempimento per la barra di avanzamento

Navigatori a soffietto

accordion-tabs-padding

Spaziatura per pannello a soffietto

Stile del pannello

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

Classe CSS

guidePanelNode

Variabili

Descrizione

panel-background-color

Colore di sfondo per il pannello

panel-font-size

Dimensione del 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 del carattere della descrizione del pannello

panel-description-padding

Spaziatura della descrizione del pannello

panel-help-bg-color

Colore di sfondo per la guida del pannello

panel-help-border-indicator-color

Colore del bordo dell’indicatore per la guida del pannello

Il nodo del pannello è diviso in navigatori e contenuti. Non esiste un componente di stile separato per il contenuto. Le variabili descritte vengono applicate sia al navigatore che al contenuto.

La classe non è presente nel pannello principale (RootPanel).

Stile mobile

Barra delle intestazioni

Queste variabili influenzano la barra dell’intestazione visibile su un dispositivo mobile o su dispositivi a schermo piccolo che contengono il titolo del pannello e i navigatori successivi e posteriori.

Classe CSS

guide-header-bar

Variabili

Descrizione

headerbar-background-color

Colore di sfondo per la barra dell’intestazione

headerbar-font-color

Colore del carattere del testo all’interno della barra dell’intestazione

headerbar-padding

Spaziatura per la barra dell’intestazione

Indicatore di scorrimento

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

Classe CSS

mobileScrollIndicator

Variabili

Descrizione

scrollIndicatorBottom

Posizione fissa dello scorrevole dal basso

scrollIndicatorRight

Posizione fissa dello scorrevole da destra

scrollIndicatorWidth

Larghezza dello scorrevole

scrollIndicatorHeight

Altezza dello scrollindicatore

Variabili specifiche del layout della barra degli strumenti fissa mobile

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

Classe CSS

mobileToolbar

Variabili

Descrizione

mobileToolbarBottom

Posizione fissa della barra degli strumenti, sul dispositivo mobile, dal basso

mobileToolbarTop

Posizione fissa della barra degli strumenti, sul dispositivo mobile, dall'alto

mobileToolbarLeft

Posizione fissa della barra degli strumenti, sul dispositivo mobile, da sinistra

mobileToolbarRight

Posizione fissa della barra degli strumenti, sul 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

Il tema Semplice iscrizione in /etc/clientlibs/fd/af/guidetheme/simpleEnrollment e la categoria guide.theme.simpleEnrollment introducono anche alcune variabili. Se si desidera creare un tema che incrementa la semplice iscrizione, è possibile utilizzare le seguenti "variabili extra:

Variabili

Descrizione

button-focus-bg-color

Colore di sfondo per 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 la barra di avanzamento corrispondente, al primo rendering.

active-nav-color

 Colore di sfondo per il navigatore della procedura guidata corrente/attiva e la barra di avanzamento corrispondente

visited-nav-color

Colore di sfondo per i navigatori della procedura guidata e la barra di avanzamento corrispondente, visitati.

tabs-bifercating-border-color

Contenitore biforcazione colore bordo in navigatori e pannelli

tabs-navigator-separator-color

Schede che separano i colori dei bordi inferiori delle schede a sinistra (navigatori schede).

tabs-child-nav-bg-color

Colore di sfondo per i navigatori nidificati/secondari/secondari del navigatore

In questa pagina