Ext.js - Estilo
El estilo de aplicación se refiere al ajuste del usuario de la apariencia de los componentes. Estos ajustes pueden incluir: color, degradados de color, fuente, márgenes / relleno, etc. Ext JS 6 tiene una nueva forma de diseñar la aplicación.
Utiliza SCSS para peinar. SCSS es una forma más dinámica de escribir el código CSS. Podemos escribir las variables en nuestra hoja de estilo con la ayuda de esto. Sin embargo, un navegador no puede comprender SCSS. Solo puede comprender CSS, por lo tanto, todos los archivos SCSS deben compilarse en CSS en un código listo para producción.
Por lo tanto, el archivo SCSS se denomina archivos de preprocesador. En Ext.js, la compilación se realiza a través de la herramienta Sencha CMD. Sencha CMD lo compila manualmente solo una vez usando el siguiente comando.
sencha app build [development]Global_CSS es el archivo CSS principal, que tiene todas las variables SCSS asociadas en ExtJS que se pueden usar en nuestra aplicación para personalizar nuestro tema al proporcionar un valor diferente según nuestra necesidad.
A continuación se muestran algunas de las variables CSS disponibles en Global_CSS en Ext.js.
| No Señor | Variable y descripción |
|---|---|
| 1 | $base-color $ base-color: color (por ejemplo, $ base-color: # 808080) Este color base se utilizará en todo el tema. |
| 2 | $base-gradient $ base-gradient: string (por ejemplo, $ base-gradient: 'mate') Este degradado base se utilizará en todo el tema. |
| 3 | $body-background-color $ body-background-color: color (por ejemplo, $ body-background-color: # 808080) Color de fondo para aplicar al elemento del cuerpo. Si se establece en transparente o 'ninguno', no se establecerá ningún estilo de color de fondo en el elemento del cuerpo. |
| 4 | $color $ color: color (por ejemplo, $ color: # 808080) Este color de texto predeterminado se utilizará en todo el tema. |
| 5 | $font-family $ familia de fuentes: cadena (por ejemplo, $ familia de fuentes: arial) Esta familia de fuentes predeterminada se utilizará en todo el tema. |
| 6 | $font-size $ tamaño de fuente: número (por ejemplo, $ tamaño de fuente: 9px) Este tamaño de fuente predeterminado se utilizará en todo el tema. |
| 7 | $font-weight $ font-weight: cadena / número (por ejemplo, $ font-weight: normal) Este peso de fuente predeterminado se utilizará en todo el tema. |
| 8 | $font-weight-bold $ font-weight-bold: cadena / número (por ejemplo, $ font-weight-bold: negrita) Este peso de fuente predeterminado para fuente en negrita se utilizará en todo el tema. |
| 9 | $include-chrome $ include-chrome: boolean (por ejemplo, $ include-chrome: true) Fiel para incluir reglas específicas de Chrome. |
| 10 | $include-ff $ include-ff: boolean (por ejemplo, $ include-ff: true) Verdadero para incluir reglas específicas de Firefox. |
| 11 | $include-ie $ include-ie: boolean (por ejemplo, $ include-ie: true) True para incluir reglas específicas de Internet Explorer para IE9 y versiones anteriores. |
| 12 | $include-opera $ include-opera: boolean (por ejemplo, $ include-opera: true) Fiel para incluir reglas específicas de Opera. |
| 13 | $include-safari $ include-safari: boolean (por ejemplo, $ include-safari: true) Fiel para incluir reglas específicas de Opera. |
| 14 | $include-webkit $ include-webkit: boolean (por ejemplo, $ include-webkit: true) Fiel para incluir reglas específicas de Webkit. |