Ext.js-スタイル

アプリケーションスタイリングとは、コンポーネントのルックアンドフィールをユーザーが調整することです。これらの調整には、色、色のグラデーション、フォント、余白/パディングなどが含まれます。ExtJS6には、アプリケーションのスタイルを設定する新しい方法があります。

スタイリングにはSCSSを使用します。SCSSは、CSSコードを記述するためのより動的な方法です。これを利用して、スタイルシートに変数を書き込むことができます。ただし、ブラウザはSCSSを理解できません。CSSしか理解できないため、すべてのSCSSファイルをCSSにコンパイルして本番用のコードにする必要があります。

したがって、SCSSファイルはプリプロセッサフ​​ァイルと呼ばれます。Ext.jsでは、コンパイルはSenchaCMDツールを介して行われます。Sencha CMDは、次のコマンドを使用して1回だけ手動でコンパイルします。

sencha app build [development]

Global_CSSはメインのCSSファイルであり、ExtJSですべてのSCSS変数が関連付けられており、必要に応じてさまざまな値を提供することでテーマをカスタマイズするためのアプリケーションで使用できます。

以下は、Ext.jsのGlobal_CSSで使用可能なCSS変数の一部です。

シニア番号 変数と説明
1

$base-color

$ base-color:color(例:$ base-color:#808080)

このベースカラーは、テーマ全体で使用されます。

2

$base-gradient

$ base-gradient:文字列(例:$ base-gradient: 'matte')

この基本グラデーションは、テーマ全体で使用されます。

3

$body-background-color

$ body-background-color:color(例:$ body-background-color:#808080)

ボディ要素に適用する背景色。透明または「なし」に設定すると、body要素に背景色のスタイルは設定されません。

4

$color

$ color:color(例:$ color:#808080)

このデフォルトのテキストの色は、テーマ全体で使用されます。

5

$font-family

$ font-family:文字列(例:$ font-family:arial)

このデフォルトのフォントファミリは、テーマ全体で使用されます。

6

$font-size

$ font-size:数値(例:$ font-size:9px)

このデフォルトのフォントサイズは、テーマ全体で使用されます。

7

$font-weight

$ font-weight:文字列/数値(例:$ font-weight:normal)

このデフォルトのフォントの太さは、テーマ全体で使用されます。

8

$font-weight-bold

$ font-weight-bold:文字列/数値(例:$ font-weight-bold:bold)

太字フォントのこのデフォルトのフォントの太さは、テーマ全体で使用されます。

9

$include-chrome

$ include-chrome:ブール値(例:$ include-chrome:true)

Chrome固有のルールを含めるのは本当です。

10

$include-ff

$ include-ff:ブール値(例:$ include-ff:true)

Firefox固有のルールを含めるのは本当です。

11

$include-ie

$ include-ie:ブール値(例:$ include-ie:true)

IE9以下のInternetExplorer固有のルールを含める場合はTrue。

12

$include-opera

$ include-opera:ブール値(例:$ include-opera:true)

Opera固有のルールを含めるのは本当です。

13

$include-safari

$ include-safari:ブール値(例:$ include-safari:true)

Opera固有のルールを含めるのは本当です。

14

$include-webkit

$ include-webkit:ブール値(例:$ include-webkit:true)

Webkit固有のルールを含めるのは本当です。