Ext.js - Stile
Lo stile dell'applicazione si riferisce alla regolazione da parte dell'utente dell'aspetto dei componenti. Queste regolazioni possono includere: colore, sfumature di colore, carattere, margini / spaziatura interna, ecc. Ext JS 6 ha un nuovo modo di definire lo stile dell'applicazione.
Usa SCSS per lo styling. SCSS è un modo più dinamico di scrivere il codice CSS. Possiamo scrivere le variabili nel nostro foglio di stile con l'aiuto di questo. Tuttavia, un browser non può comprendere SCSS. Può solo comprendere CSS, quindi tutti i file SCSS dovrebbero essere compilati in CSS in un codice pronto per la produzione.
Pertanto, il file SCSS è chiamato file del preprocessore. In Ext.js, la compilazione viene eseguita tramite lo strumento Sencha CMD. Sencha CMD lo compila manualmente solo una volta utilizzando il seguente comando.
sencha app build [development]Global_CSS è il file CSS principale, a cui sono associate tutte le variabili SCSS in ExtJS che possono essere utilizzate nella nostra applicazione per personalizzare il nostro tema fornendo un valore diverso in base alle nostre necessità.
Di seguito sono riportate alcune delle variabili CSS disponibili in Global_CSS in Ext.js.
| Suor n | Variabile e descrizione |
|---|---|
| 1 | $base-color $ base-color: color (ad esempio $ base-color: # 808080) Questo colore di base deve essere utilizzato in tutto il tema. |
| 2 | $base-gradient $ base-gradient: string (ad es. $ base-gradient: 'matte') Questo gradiente di base deve essere utilizzato in tutto il tema. |
| 3 | $body-background-color $ body-background-color: color (ad esempio $ body-background-color: # 808080) Colore di sfondo da applicare all'elemento del corpo. Se impostato su trasparente o "nessuno", nessuno stile di colore di sfondo sarà impostato sull'elemento del corpo. |
| 4 | $color $ color: color (ad esempio $ color: # 808080) Questo colore di testo predefinito deve essere utilizzato in tutto il tema. |
| 5 | $font-family $ font-family: string (ad esempio $ font-family: arial) Questa famiglia di caratteri predefinita deve essere utilizzata in tutto il tema. |
| 6 | $font-size $ font-size: numero (ad esempio $ font-size: 9px) Questa dimensione del carattere predefinita deve essere utilizzata in tutto il tema. |
| 7 | $font-weight $ font-weight: stringa / numero (ad esempio $ font-weight: normale) Questo spessore del carattere predefinito deve essere utilizzato in tutto il tema. |
| 8 | $font-weight-bold $ font-weight-bold: stringa / numero (ad esempio $ font-weight-bold: grassetto) Questo spessore del carattere predefinito per i caratteri in grassetto deve essere utilizzato in tutto il tema. |
| 9 | $include-chrome $ include-chrome: boolean (ad esempio $ include-chrome: true) Vero per includere regole specifiche di Chrome. |
| 10 | $include-ff $ include-ff: booleano (ad esempio $ include-ff: true) Vero per includere regole specifiche di Firefox. |
| 11 | $include-ie $ include-ie: boolean (es $ include-ie: true) Vero per includere regole specifiche di Internet Explorer per IE9 e versioni precedenti. |
| 12 | $include-opera $ include-opera: boolean (ad esempio $ include-opera: true) Vero per includere regole specifiche di Opera. |
| 13 | $include-safari $ include-safari: boolean (ad esempio $ include-safari: true) Vero per includere regole specifiche di Opera. |
| 14 | $include-webkit $ include-webkit: boolean (ad esempio $ include-webkit: true) Vero per includere regole specifiche di Webkit. |