ข้อมูลพื้นฐานสำหรับการกำหนดสไตล์ของส่วนประกอบ

ข้อมูลพื้นฐานสำหรับสไตล์ของธีม

ไฟล์ design.json ของธีมจะแสดงสไตล์ทั้งหมด (frame, shadow, highlighted เป็นต้น) ซึ่งสามารถใช้กับองค์ประกอบแต่ละประเภท (เช่น button หรือ image) แต่ละสไตล์จะมีทั้ง display name และ class name ชื่อที่ปรากฏจะแสดงในแท็บ สไตล์ ของแผงข้อมูล การตั้งค่า ชื่อคลาสจะอ้างอิงซีเลคเตอร์ CSS ในไฟล์ design.css ของธีม ตัวอย่างเช่น รายการสำหรับองค์ประกอบ button มีดังนี้

"scs-button": {
         "styles": [{
                          "name": "COMP_STYLE_ALTA_SMALL",
                          "class": "scs-button-default-style"
                          },
                    {
                          "name": "COMP_STYLE_ALTA_LARGE",
                          "class": "scs-button-style-2"
                          },
                    {
                          "name": "COMP_STYLE_SIMPLE",
                          "class": "scs-button-style-3"
                          }
                    ]
},

ชื่อขององค์ประกอบในระบบจะมีการแปล เพื่อให้คุณเห็นคีย์สำหรับการเรียกชื่อสไตล์จากบันเดิลทรัพยากร ถ้าคุณเพิ่มองค์ประกอบ button ไปยังเพจ จากนั้นเลือกสไตล์ แบบง่าย ในแผงข้อมูล การตั้งค่า > สไตล์ ไฟล์ design.json จะเชื่อมโยงชื่อที่ปรากฏ แบบง่าย (คีย์ COMP_STYLE_SIMPLE) ที่มีชื่อคลาส scs-button-style-3 ระบบจะแสดงผล button โดยมีคลาสต่อไปนี้

scs-component scs-button scs-button-style-3

ถ้าไม่ได้เลือกสไตล์ไว้สำหรับองค์ประกอบที่กำหนด ระบบจะใช้สไตล์ดีฟอลต์ scs-type-default-style ในตัวอย่างก่อนหน้า ระบบจะแสดงผลปุ่มโดยมีคลาสต่อไปนี้

scs-component scs-button scs-button-default-style 

สไตล์ scs-component-content

สำหรับองค์ประกอบในระบบทั้งหมด ภายใน scs-component <div> ซึ่งกล่าวถึงก่อนหน้านี้ จะมี content <div> ที่มีคลาส CSS scs-component-content อีกนัยหนึ่งคือ:

scs-component scs-type design-style
scs-component-content

ในไฟล์ design.css มักจะมีการใช้คลาส scs-component-content เพื่อกำหนดสไตล์ "กรอบ" ล้อมรอบองค์ประกอบ (เช่น เพื่อใช้เส้นขอบหรือเงา)

สิ่งที่ควรทราบก็คือ ในไฟล์ comp.css ในระบบ มีการกำหนดคลาส scs-component-content ร่วมโดยใช้ position:relative และ display:inline-block ไว้ รวมถึงคุณสมบัติ CSS อื่นด้วย

แม้ว่า scs-component-content จะมีประโยชน์ในการกำหนดสไตล์ "กรอบ" ล้อมรอบแต่ละองค์ประกอบ คุณยังจำเป็นต้องใช้คลาสเฉพาะขององค์ประกอบเพื่อให้กำหนดสไตล์ขององค์ประกอบได้อย่างสมบูรณ์ โปรดดู การกำหนดสไตล์เฉพาะองค์ประกอบ