Ext.js - Estilo
O Estilo do Aplicativo refere-se ao ajuste do usuário quanto à aparência e ao toque dos componentes. Esses ajustes podem incluir: cor, gradientes de cor, fonte, margens / preenchimento, etc. Ext JS 6 tem uma nova maneira de estilizar o aplicativo.
Ele usa SCSS para estilização. SCSS é uma forma mais dinâmica de escrever o código CSS. Podemos escrever as variáveis em nossa folha de estilo com a ajuda deste. No entanto, um navegador não consegue entender o SCSS. Ele só pode entender CSS, portanto, todos os arquivos SCSS devem ser compilados em CSS para um código pronto para produção.
Portanto, o arquivo SCSS é chamado de arquivos de pré-processador. Em Ext.js, a compilação é feita por meio da ferramenta Sencha CMD. O Sencha CMD o compila manualmente apenas uma vez usando o seguinte comando.
sencha app build [development]Global_CSS é o arquivo CSS principal, que possui todas as variáveis SCSS associadas a ele em ExtJS que podem ser usadas em nosso aplicativo para personalizar nosso tema, fornecendo valores diferentes com base em nossa necessidade.
A seguir estão algumas das variáveis CSS disponíveis no Global_CSS em Ext.js.
| Sr. Não | Variável e Descrição |
|---|---|
| 1 | $base-color $ base-color: color (por exemplo, $ base-color: # 808080) Esta cor base deve ser usada em todo o tema. |
| 2 | $base-gradient $ base-gradiente: string (por exemplo, $ base-gradiente: 'matte') Este gradiente básico deve ser usado em todo o tema. |
| 3 | $body-background-color $ body-background-color: color (por exemplo, $ body-background-color: # 808080) Cor de fundo a ser aplicada ao elemento do corpo. Se definido como transparente ou 'nenhum', nenhum estilo de cor de fundo será definido no elemento do corpo. |
| 4 | $color $ color: color (por exemplo, $ color: # 808080) Esta cor de texto padrão deve ser usada em todo o tema. |
| 5 | $font-family $ font-family: string (por exemplo, $ font-family: arial) Esta família de fontes padrão deve ser usada em todo o tema. |
| 6 | $font-size $ font-size: número (por exemplo, $ font-size: 9px) Este tamanho de fonte padrão deve ser usado em todo o tema. |
| 7 | $font-weight $ font-weight: string / número (por exemplo, $ font-weight: normal) Esta espessura de fonte padrão deve ser usada em todo o tema. |
| 8 | $font-weight-bold $ font-weight-bold: string / número (por exemplo, $ font-weight-bold: negrito) Esta espessura de fonte padrão para fonte em negrito deve ser usada em todo o tema. |
| 9 | $include-chrome $ include-chrome: boolean (por exemplo, $ include-chrome: true) Verdadeiro para incluir regras específicas do Chrome. |
| 10 | $include-ff $ include-ff: boolean (por exemplo, $ include-ff: true) Verdadeiro para incluir regras específicas do Firefox. |
| 11 | $include-ie $ include-ie: boolean (por exemplo, $ include-ie: true) Verdadeiro para incluir regras específicas do Internet Explorer para IE9 e inferior. |
| 12 | $include-opera $ include-opera: boolean (por exemplo, $ include-opera: true) Fiel para incluir regras específicas do Opera. |
| 13 | $include-safari $ include-safari: boolean (por exemplo, $ include-safari: true) Fiel para incluir regras específicas do Opera. |
| 14 | $include-webkit $ include-webkit: boolean (por exemplo, $ include-webkit: true) True para incluir regras específicas do Webkit. |