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