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.