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.