Ext.js - Styl
Styl aplikacji odnosi się do dostosowania przez użytkownika wyglądu i działania komponentów. Te korekty mogą obejmować: kolor, gradienty kolorów, czcionkę, marginesy / wypełnienie, itp. Ext JS 6 ma nowy sposób stylizacji aplikacji.
Do stylizacji używa SCSS. SCSS to bardziej dynamiczny sposób pisania kodu CSS. Z pomocą tego możemy zapisać zmienne w naszym arkuszu stylów. Jednak przeglądarka nie może zrozumieć SCSS. Potrafi tylko zrozumieć CSS, dlatego wszystkie pliki SCSS powinny zostać skompilowane do CSS do kodu gotowego do produkcji.
Dlatego plik SCSS nazywany jest plikami preprocesora. W Ext.js kompilacja odbywa się za pomocą narzędzia Sencha CMD. Sencha CMD kompiluje go ręcznie tylko raz, używając następującego polecenia.
sencha app build [development]Global_CSS to główny plik CSS, który zawiera wszystkie zmienne SCSS powiązane z nim w ExtJS, które można wykorzystać w naszej aplikacji do dostosowywania naszego motywu, zapewniając różne wartości w zależności od naszych potrzeb.
Poniżej przedstawiono niektóre zmienne CSS dostępne w Global_CSS w Ext.js.
| Sr.No | Zmienna i opis |
|---|---|
| 1 | $base-color $ base-color: color (np. $ base-color: # 808080) Ten kolor podstawowy ma być używany w całym temacie. |
| 2 | $base-gradient $ base-gradient: string (np. $ base-gradient: 'matte') Ten podstawowy gradient ma być używany w całym temacie. |
| 3 | $body-background-color $ body-background-color: color (np. $ body-background-color: # 808080) Kolor tła do zastosowania w elemencie body. Jeśli ustawisz przezroczystość lub brak, styl koloru tła nie zostanie ustawiony dla elementu body. |
| 4 | $color $ color: color (np. $ color: # 808080) Ten domyślny kolor tekstu ma być używany w całym motywie. |
| 5 | $font-family $ font-family: string (np. $ font-family: arial) Ta domyślna rodzina czcionek ma być używana w całym motywie. |
| 6 | $font-size $ font-size: number (np. $ font-size: 9px) Ten domyślny rozmiar czcionki ma być używany w całym motywie. |
| 7 | $font-weight $ font-weight: string / number (np. $ font-weight: normal) Ta domyślna grubość czcionki ma być używana w całym motywie. |
| 8 | $font-weight-bold $ font-weight-bold: string / number (np. $ font-weight-bold: bold) Ta domyślna grubość czcionki pogrubionej ma być używana w całym motywie. |
| 9 | $include-chrome $ include-chrome: boolean (np. $ include-chrome: true) To prawda, że obejmuje określone zasady Chrome. |
| 10 | $include-ff $ include-ff: boolean (np. $ include-ff: true) To prawda, że obejmuje określone zasady Firefoksa. |
| 11 | $include-ie $ include-ie: boolean (np. $ include-ie: true) Prawdą jest, że zawiera reguły specyficzne dla Internet Explorera dla IE9 i starszych. |
| 12 | $include-opera $ include-opera: boolean (np. $ include-opera: true) To prawda, że obejmuje konkretne zasady Opery. |
| 13 | $include-safari $ include-safari: boolean (np. $ include-safari: true) To prawda, że obejmuje konkretne zasady Opery. |
| 14 | $include-webkit $ include-webkit: boolean (np. $ include-webkit: true) To prawda, że obejmuje określone zasady Webkit. |