Ext.js - Stil
Das Anwendungs-Styling bezieht sich auf die Anpassung des Erscheinungsbilds der Komponenten durch den Benutzer. Diese Anpassungen können Folgendes umfassen: Farbe, Farbverläufe, Schriftart, Ränder / Auffüllungen usw. Ext JS 6 bietet eine neue Art der Gestaltung der Anwendung.
Es verwendet SCSS für das Styling. SCSS ist eine dynamischere Methode zum Schreiben des CSS-Codes. Mit dieser Hilfe können wir die Variablen in unser Stylesheet schreiben. Ein Browser kann SCSS jedoch nicht verstehen. Es kann nur CSS verstehen, daher sollten alle SCSS-Dateien zu einem produktionsbereiten Code in CSS kompiliert werden.
Daher wird die SCSS-Datei als Präprozessor-Datei bezeichnet. In Ext.js erfolgt die Kompilierung mit dem Sencha CMD-Tool. Sencha CMD kompiliert es nur einmal manuell mit dem folgenden Befehl.
sencha app build [development]Global_CSS ist die Haupt-CSS-Datei, der alle SCSS-Variablen in ExtJS zugeordnet sind, die in unserer Anwendung zum Anpassen unseres Themas verwendet werden können, indem je nach Bedarf unterschiedliche Werte bereitgestellt werden.
Im Folgenden sind einige der CSS-Variablen aufgeführt, die im Global_CSS in Ext.js verfügbar sind.
| Sr.Nr. | Variable & Beschreibung |
|---|---|
| 1 | $base-color $ Grundfarbe: Farbe (zB $ Grundfarbe: # 808080) Diese Grundfarbe soll im gesamten Thema verwendet werden. |
| 2 | $base-gradient $ base-gradient: string (zB $ base-gradient: 'matte') Dieser Basisverlauf ist im gesamten Thema zu verwenden. |
| 3 | $body-background-color $ Körperhintergrundfarbe: Farbe (zB $ Körperhintergrundfarbe: # 808080) Hintergrundfarbe für das Körperelement. Bei der Einstellung "Transparent" oder "Keine" wird für das Körperelement kein Hintergrundfarbstil festgelegt. |
| 4 | $color $ color: color (zB $ color: # 808080) Diese Standardtextfarbe wird im gesamten Thema verwendet. |
| 5 | $font-family $ font-family: string (zB $ font-family: arial) Diese Standardschriftfamilie wird im gesamten Thema verwendet. |
| 6 | $font-size $ font-size: number (zB $ font-size: 9px) Diese Standardschriftgröße wird im gesamten Design verwendet. |
| 7 | $font-weight $ font-weight: string / number (zB $ font-weight: normal) Diese Standardschriftgröße wird im gesamten Thema verwendet. |
| 8 | $font-weight-bold $ font-weight-fett: Zeichenfolge / Zahl (zB $ font-weight-fett: fett) Diese Standardschriftgröße für fette Schrift wird im gesamten Thema verwendet. |
| 9 | $include-chrome $ include-chrome: boolean (zB $ include-chrome: true) Richtig, um Chrome-spezifische Regeln einzuschließen. |
| 10 | $include-ff $ include-ff: boolean (zB $ include-ff: true) Richtig, um Firefox-spezifische Regeln einzuschließen. |
| 11 | $include-ie $ include-ie: boolean (zB $ include-ie: true) Richtig, um Internet Explorer-spezifische Regeln für IE9 und niedriger einzuschließen. |
| 12 | $include-opera $ include-opera: boolean (zB $ include-opera: true) True, um Opera-spezifische Regeln einzuschließen. |
| 13 | $include-safari $ include-safari: boolean (zB $ include-safari: true) True, um Opera-spezifische Regeln einzuschließen. |
| 14 | $include-webkit $ include-webkit: boolean (zB $ include-webkit: true) True, um Webkit-spezifische Regeln einzuschließen. |