Show Menu
ARGOMENTI×

Stili di costruzione per i moduli adattivi

Prerequisiti

Conoscenza dei CSS e del framework LESS.

Elementi personalizzabili

L'articolo elenca le classi css dei moduli adattivi disponibili al pubblico. È possibile utilizzare queste classi per definire lo stile di vari componenti di un modulo adattivo. Lo stile dei componenti di authoring, ad esempio finestre di dialogo e barre di stato contenenti avvisi, non rientra nell’ambito di questo articolo. Utilizzate questi costrutti di stile per creare stili (utilizzando CSS o Less) solo quando non è possibile formattare i componenti utilizzando l'editor di temi.

Personalizzazione degli stili nei moduli adattivi

Il framework LESS semplifica l'uso di maiuscole e minuscole per personalizzare gli stili nei moduli adattivi. Il framework consente di definire gli stili mediante un set di variabili e funzioni (mixin). Il framework LESS consente di ridurre le dimensioni del codice bundle e di aumentarne la riutilizzabilità.
È possibile personalizzare gli stili di modulo adattivi nei seguenti modi:
  • Modificare il tema
  • Modificare lo stile del componente

Modifica del tema

È possibile modificare il tema di un modulo adattivo per assicurare che l'aspetto sia coerente con le pagine Web in cui il modulo adattivo è incorporato.
Le modifiche nell'aspetto generale del modulo adattivo che utilizzano le proprietà CSS in genere fanno parte di modifiche ai temi. Le modifiche principali allo "ok" e al funzionamento del modulo adattivo, come le modifiche nel layout e nella posizione dei componenti, non sono considerate modifiche ai temi.
In base al programma di avvio, 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
  • LineHeight
Attualmente, le variabili LESS sono definite solo per queste proprietà dei vari elementi di un modulo adattivo.

Modifica dello stile del componente

Potete apportare modifiche all’aspetto, al layout, al posizionamento e alla visibilità degli elementi. Per eseguire questa operazione, create o aggiornate i file .css personalizzati in modo da includere i costrutti di stile elencati in questo articolo.
Per applicare uno stile a un modulo adattivo, aprire il modulo adattivo in per la modifica, aprire le proprietà del contenitore di modulo adattivo, specificare il percorso del file CSS personalizzato nella scheda di base. I costrutti di stile predefiniti del modulo adattivo vengono sostituiti con i costrutti elencati nel file .css personalizzato.

Componenti

I componenti descritti in questo articolo dispongono di classi CSS predefinite. È possibile 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 per il contenitore
container-fontColor
Colore font per il contenitore

Stile campo

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, descrizione dell’Aiuto (descrizione 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 font del messaggio di errore del campo
field-error-font-size
Dimensione del font del messaggio di errore del campo

Stile etichetta

L' etichetta dell'elemento HTML utilizzata per il campo include le classi sinistra o superiore , a seconda che l'etichetta si trovi in alto o a sinistra.
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à 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 l'etichetta guideFieldLabel . Se siete un autore, ignorate questa regola per rendere visibili le modifiche personalizzate.

Stile widget

A seconda del tipo, i widget includono anche classi. Comunemente, i widget includono la guideFieldWidget classe. I widget forniti con HTML normalmente utilizzano l'input standard dell'elemento HTML e selezionano. Lo stile viene applicato di conseguenza. Non è possibile formattare un widget personalizzato modificando le variabili.
Classe CSS
guideFieldWidget
Variabili
Descrizione
widgets-bg-color
Colore di sfondo per i widget (Non funziona per le caselle di controllo e i pulsanti 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
Dimensione del testo all’interno del widget
widgets-line-height
Proprietà lineheight CSS 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 per il widget quando il campo è disattivato
widgets-disabled-font-color
Colore del font per il widget quando il campo è disabilitato
widgets-disabled-border-color
Colore del bordo del widget quando il campo è disattivato
widget-height
Altezza del widget (non funziona per casella di controllo e pulsante di scelta)
checkbutton-height
Altezza per la casella di controllo e il pulsante di scelta.
listboxwidget-height
Altezza massima per un menu a discesa con più selezioni

Limitazioni nello stile dei widget

Lo stile per i campi attivi, obbligatori e disattivati è limitato utilizzando le variabili. Tuttavia, potete modificarlo ignorando gli stili. L'utilizzo di variabili è limitato principalmente per mantenere sotto controllo il numero di variabili. La limitazione 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 lungo. 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 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 del bordo dell'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 dei font della breve Guida dei widget
widgets-help-short-tooltip-bg-color
Colore di sfondo della breve descrizione dei widget
widgets-help-short-tooltip-color
Colore dei font della breve descrizione comandi dei widget

Condizioni d’uso

Il widget Termini e condizioni (TnC ) consente di specificare termini e condizioni. Potete personalizzare il widget utilizzando le variabili descritte nella tabella seguente.
Variabili
Descrizione
tnc-unvisited Colore del font del collegamento tnc non visitato.
tnc-visited Colore del 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 è un pulsante:
  • pulsante
  • element with class .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
Dimensione del bordo dei pulsanti
button-border-type
Tipo bordo
button-padding
Proprietà di spaziatura CSS per il pulsante
button-font-size
Dimensione del font per il pulsante
button-background-color
Colore di sfondo per il pulsante
button-font-color
Colore del 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 del font per i pulsanti di grandi dimensioni
button-small-padding
Spaziatura per i pulsanti piccoli (pulsanti con classe .buttonsmall)
button-small-font-size
Dimensione del font 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 font 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 lo stile dell'avviso (pulsanti con la classe .buttonwarning)
button-warning-font-color
Colore font per i pulsanti con lo stile dell'avviso
button-warning-border-color
Colore del bordo per i pulsanti con lo stile dell'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

Per i widget, viene visualizzato un punto interrogativo quando un autore aggiunge una lunga descrizione al contenuto della Guida. Viene utilizzata l'icona predefinita fornita in bootstrap. Per utilizzare un'icona personalizzata, potete personalizzare le icone di avvio.
Classe CSS
guideHelpQuestionMark
Variabili
Descrizione
questionmark-font-color
Colore dell'icona
questionmark-hover-font-color
Colore dell’icona quando il mouse vi si trova sopra

Tabella

È possibile modificare il tema 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 Allegato file dei moduli adattivi consente di caricare i file. Potete inoltre personalizzare il widget utilizzando le variabili.
Variabili
Descrizione
fileItemPadding
Spaziatura per i file visualizzati nel widget
fileItemBackground
Colore di sfondo per l’elemento del file
fileItemBorderColor
Colore del bordo per il bordo superiore
fileItemColor
Colore del font per l’elemento del file
filePreviewIconColor
Colore dell’icona Anteprima (icona Bootstrap) nel widget
fileItemCommentHeight
Altezza del commento per l’elemento del file

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 del font per il testo del pannello
panel-padding
Margine nel pannello
panel-description-font-size
Dimensione del font 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 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.
&ast;La classe non è presente nel pannello superiore (RootPanel).

Stile mobile

Header bar

Queste variabili influenzano la barra dell’intestazione visibile su un dispositivo mobile o su dispositivi con 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 di intestazione
headerbar-font-color
Colore del font per il testo all’interno della barra dell’intestazione
headerbar-padding
Spaziatura per la barra dell’intestazione

Scroll indicator

Queste variabili influenzano l’indicatore di scorrimento, ossia una freccia arancione che viene visualizzata su un dispositivo mobile o su un dispositivo a schermo piccolo. Un indicatore di scorrimento indica che è presente del contenuto oltre la parte visibile dello schermo. Potete scorrere verso il basso per visualizzarlo. Quando si tocca 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 scorrevole

Variabili specifiche del layout della barra degli strumenti fissa per dispositivi mobili

Queste variabili nella tabella seguente influiscono sul layout della barra degli strumenti fissa per dispositivi mobili.
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