Ext.js - Gaya
Gaya Aplikasi mengacu pada penyesuaian pengguna atas tampilan dan nuansa komponen. Penyesuaian ini mungkin termasuk: warna, gradien warna, font, margin / padding, dll. Ext JS 6 memiliki cara baru untuk menata aplikasi.
Ini menggunakan SCSS untuk penataan. SCSS adalah cara yang lebih dinamis untuk menulis kode CSS. Kita bisa menulis variabel di stylesheet kita dengan bantuan ini. Namun, browser tidak dapat memahami SCSS. Itu hanya dapat memahami CSS, oleh karena itu semua file SCSS harus dikompilasi ke dalam CSS menjadi kode siap produksi.
Dengan demikian, file SCSS disebut file preprocessor. Di Ext.js, kompilasi dilakukan melalui alat Sencha CMD. Sencha CMD mengkompilasinya secara manual hanya sekali menggunakan perintah berikut.
sencha app build [development]Global_CSS adalah file CSS utama, yang memiliki semua variabel SCSS yang terkait dengannya di ExtJS yang dapat digunakan dalam aplikasi kita untuk menyesuaikan tema kita dengan memberikan nilai yang berbeda berdasarkan kebutuhan kita.
Berikut adalah beberapa variabel CSS yang tersedia di Global_CSS di Ext.js.
| Sr Tidak | Variabel & Deskripsi |
|---|---|
| 1 | $base-color $ base-color: color (mis. $ base-color: # 808080) Warna dasar ini akan digunakan di seluruh tema. |
| 2 | $base-gradient $ base-gradient: string (misal $ base-gradient: 'matte') Gradien dasar ini akan digunakan di seluruh tema. |
| 3 | $body-background-color $ body-background-color: color (mis. $ body-background-color: # 808080) Warna latar belakang untuk diterapkan ke elemen tubuh. Jika disetel ke transparan atau 'tidak ada', tidak ada gaya warna latar belakang yang akan disetel pada elemen badan. |
| 4 | $color $ color: color (mis. $ color: # 808080) Warna teks default ini akan digunakan di seluruh tema. |
| 5 | $font-family $ font-family: string (mis. $ font-family: arial) Keluarga font default ini akan digunakan di seluruh tema. |
| 6 | $font-size $ font-size: number (mis. $ font-size: 9px) Ukuran font default ini akan digunakan di seluruh tema. |
| 7 | $font-weight $ font-weight: string / number (mis. $ font-weight: normal) Font-weight default ini akan digunakan di seluruh tema. |
| 8 | $font-weight-bold $ font-weight-bold: string / number (mis. $ font-weight-bold: bold) Font-weight default untuk font tebal ini akan digunakan di seluruh tema. |
| 9 | $include-chrome $ include-chrome: boolean (mis. $ include-chrome: true) Benar untuk menyertakan aturan khusus Chrome. |
| 10 | $include-ff $ include-ff: boolean (mis. $ include-ff: true) Benar untuk menyertakan aturan khusus Firefox. |
| 11 | $include-ie $ include-ie: boolean (mis. $ include-ie: true) Benar untuk menyertakan aturan khusus Internet Explorer untuk IE9 dan yang lebih rendah. |
| 12 | $include-opera $ include-opera: boolean (misalnya $ include-opera: true) Benar untuk memasukkan aturan khusus Opera. |
| 13 | $include-safari $ include-safari: boolean (mis. $ include-safari: true) Benar untuk memasukkan aturan khusus Opera. |
| 14 | $include-webkit $ include-webkit: boolean (mis. $ include-webkit: true) Benar untuk menyertakan aturan khusus Webkit. |