Ext.js - Phong cách
Tạo kiểu ứng dụng đề cập đến việc người dùng điều chỉnh giao diện của các thành phần. Những điều chỉnh này có thể bao gồm: màu sắc, độ dốc màu, phông chữ, lề / đệm, v.v. Ext JS 6 có một cách tạo kiểu mới cho ứng dụng.
Nó sử dụng SCSS để tạo kiểu. SCSS là một cách viết mã CSS năng động hơn. Chúng ta có thể viết các biến trong biểu định kiểu của mình với sự trợ giúp của điều này. Tuy nhiên, trình duyệt không thể hiểu SCSS. Nó chỉ có thể hiểu CSS, do đó tất cả các tệp SCSS sẽ được biên dịch thành CSS thành một mã sẵn sàng sản xuất.
Do đó, tệp SCSS được gọi là tệp tiền xử lý. Trong Ext.js, việc biên dịch được thực hiện thông qua công cụ Sencha CMD. Sencha CMD biên dịch nó theo cách thủ công chỉ một lần bằng lệnh sau.
sencha app build [development]Global_CSS là tệp CSS chính, có tất cả các biến SCSS được liên kết với nó trong ExtJS có thể được sử dụng trong ứng dụng của chúng tôi để tùy chỉnh chủ đề của chúng tôi bằng cách cung cấp giá trị khác nhau dựa trên nhu cầu của chúng tôi.
Sau đây là một số biến CSS có sẵn trong Global_CSS trong Ext.js.
| Sr.No | Biến & Mô tả |
|---|---|
| 1 | $base-color $ base-color: màu (ví dụ: $ base-color: # 808080) Màu cơ bản này sẽ được sử dụng xuyên suốt chủ đề. |
| 2 | $base-gradient $ base-gradient: string (ví dụ: $ base-gradient: 'matte') Gradient cơ sở này sẽ được sử dụng trong suốt chủ đề. |
| 3 | $body-background-color $ body-background-color: color (ví dụ: $ body-background-color: # 808080) Màu nền để áp dụng cho phần tử nội dung. Nếu được đặt thành trong suốt hoặc 'không có', sẽ không có kiểu màu nền nào được đặt trên phần tử nội dung. |
| 4 | $color $ color: màu (ví dụ: $ color: # 808080) Màu văn bản mặc định này sẽ được sử dụng trong toàn bộ chủ đề. |
| 5 | $font-family $ font-family: string (ví dụ: $ font-family: arial) Họ phông chữ mặc định này sẽ được sử dụng trong suốt chủ đề. |
| 6 | $font-size $ font-size: number (ví dụ: $ font-size: 9px) Kích thước phông chữ mặc định này sẽ được sử dụng trong toàn bộ chủ đề. |
| 7 | $font-weight $ font-weight: string / number (ví dụ: $ font-weight: normal) Trọng lượng phông chữ mặc định này sẽ được sử dụng trong toàn bộ chủ đề. |
| số 8 | $font-weight-bold $ font-weight-bold: string / number (ví dụ: $ font-weight-bold: bold) Trọng lượng phông chữ mặc định cho phông chữ đậm này sẽ được sử dụng trong toàn bộ chủ đề. |
| 9 | $include-chrome $ include-chrome: boolean (ví dụ: $ include-chrome: true) Đúng để bao gồm các quy tắc cụ thể của Chrome. |
| 10 | $include-ff $ include-ff: boolean (ví dụ: $ include-ff: true) Đúng để bao gồm các quy tắc cụ thể của Firefox. |
| 11 | $include-ie $ include-ie: boolean (ví dụ: $ include-ie: true) Đúng bao gồm các quy tắc cụ thể của Internet Explorer cho IE9 trở xuống. |
| 12 | $include-opera $ include-opera: boolean (ví dụ: $ include-opera: true) Đúng bao gồm các quy tắc cụ thể của Opera. |
| 13 | $include-safari $ include-safari: boolean (ví dụ: $ include-safari: true) Đúng bao gồm các quy tắc cụ thể của Opera. |
| 14 | $include-webkit $ include-webkit: boolean (ví dụ: $ include-webkit: true) Đúng bao gồm các quy tắc cụ thể của Webkit. |