Ext.js - รูปแบบ
Application Styling หมายถึงการปรับแต่งรูปลักษณ์ของส่วนประกอบของผู้ใช้ การปรับเปลี่ยนเหล่านี้อาจรวมถึงสีการไล่ระดับสีแบบอักษรระยะขอบ / การเว้นระยะห่าง ฯลฯ Ext JS 6 มีวิธีการจัดรูปแบบแอปพลิเคชันแบบใหม่
ใช้ SCSS ในการจัดแต่งทรงผม SCSS เป็นวิธีการเขียนโค้ด CSS แบบไดนามิกมากขึ้น เราสามารถเขียนตัวแปรในสไตล์ชีตของเราได้ด้วยความช่วยเหลือของสิ่งนี้ อย่างไรก็ตามเบราว์เซอร์ไม่สามารถเข้าใจ SCSS มันสามารถเข้าใจ CSS เท่านั้นดังนั้นไฟล์ SCSS ทั้งหมดควรได้รับการคอมไพล์เป็น CSS เป็นโค้ดที่พร้อมใช้งานจริง
ดังนั้นไฟล์ SCSS จึงเรียกว่าไฟล์พรีโปรเซสเซอร์ ใน Ext.js การคอมไพล์ทำได้ผ่านเครื่องมือ Sencha CMD Sencha CMD คอมไพล์ด้วยตนเองเพียงครั้งเดียวโดยใช้คำสั่งต่อไปนี้
sencha app build [development]Global_CSS เป็นไฟล์ CSS หลักซึ่งมีตัวแปร SCSS ทั้งหมดที่เชื่อมโยงอยู่ใน ExtJS ที่สามารถใช้ในแอปพลิเคชันของเราเพื่อปรับแต่งธีมของเราโดยให้ค่าที่แตกต่างกันตามความต้องการของเรา
ต่อไปนี้เป็นตัวแปร CSS บางส่วนที่มีอยู่ใน Global_CSS ใน Ext.js
| ซีเนียร์ No | ตัวแปรและคำอธิบาย |
|---|---|
| 1 | $base-color $ base-color: color (เช่น $ base-color: # 808080) สีฐานนี้จะใช้ตลอดทั้งธีม |
| 2 | $base-gradient $ base-gradient: string (เช่น $ base-gradient: 'matte') การไล่ระดับสีฐานนี้จะใช้ตลอดทั้งธีม |
| 3 | $body-background-color $ body-background-color: color (เช่น $ body-background-color: # 808080) สีพื้นหลังที่จะใช้กับองค์ประกอบของร่างกาย หากตั้งค่าเป็นแบบโปร่งใสหรือ "ไม่มี" จะไม่มีการกำหนดลักษณะสีพื้นหลังในองค์ประกอบเนื้อหา |
| 4 | $color $ color: color (เช่น $ color: # 808080) สีข้อความเริ่มต้นนี้จะถูกใช้ตลอดทั้งธีม |
| 5 | $font-family $ font-family: string (เช่น $ font-family: arial) ตระกูลฟอนต์เริ่มต้นนี้จะถูกใช้ตลอดทั้งธีม |
| 6 | $font-size $ font-size: number (เช่น $ font-size: 9px) ขนาดฟอนต์เริ่มต้นนี้จะถูกใช้ตลอดทั้งธีม |
| 7 | $font-weight $ font-weight: string / number (เช่น $ font-weight: normal) น้ำหนักแบบอักษรเริ่มต้นนี้จะถูกใช้ตลอดทั้งธีม |
| 8 | $font-weight-bold $ font-weight-bold: สตริง / ตัวเลข (เช่น $ font-weight-bold: bold) น้ำหนักฟอนต์เริ่มต้นสำหรับฟอนต์ตัวหนานี้จะถูกใช้ตลอดทั้งธีม |
| 9 | $include-chrome $ include-chrome: boolean (เช่น $ include-chrome: true) จริงที่จะรวมกฎเฉพาะของ Chrome |
| 10 | $include-ff $ include-ff: boolean (เช่น $ include-ff: true) จริงที่จะรวมกฎเฉพาะของ Firefox |
| 11 | $include-ie $ include-ie: boolean (เช่น $ include-ie: true) True รวมกฎเฉพาะของ Internet Explorer สำหรับ IE9 และต่ำกว่า |
| 12 | $include-opera $ include-opera: boolean (เช่น $ include-opera: true) จริงที่จะรวมกฎเฉพาะของ Opera |
| 13 | $include-safari $ include-safari: boolean (เช่น $ include-safari: true) จริงที่จะรวมกฎเฉพาะของ Opera |
| 14 | $include-webkit $ include-webkit: boolean (เช่น $ include-webkit: true) จริงเพื่อรวมกฎเฉพาะของ Webkit |