Framework7 - ธีมสี

คำอธิบาย

Framework7 มีธีมสีที่แตกต่างกันสำหรับแอปพลิเคชันของคุณ

ธีมสีจะให้สีของธีมประเภทต่างๆที่ใช้ในการทำงานกับแอพพลิเคชั่นได้อย่างราบรื่นตามที่ระบุไว้ในตารางด้านล่าง -

ส. เลขที่	ประเภทธีมและคำอธิบาย
1	สีของธีม iOS คุณสามารถใช้ธีมสีเริ่มต้นของ iOS 10 แบบสำหรับแอปพลิเคชัน
2	สีของธีมวัสดุ Framework7 มีธีมสีวัสดุเริ่มต้น 22 แบบสำหรับแอปพลิเคชัน

การใช้ธีมสี

Framework7 ช่วยให้คุณสามารถใช้ธีมสีกับองค์ประกอบต่าง ๆ เช่น page, list-block, navbar, buttons-row เป็นต้นโดยใช้คลาสtheme- [color]กับองค์ประกอบหลัก

ตัวอย่าง

...
</body>

<div class = "page theme-gray">
   ...
</div>

<div class = "list-block theme-blue">
   ...
</div>

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

เค้าโครงธีม

คุณสามารถใช้รูปแบบรูปแบบเริ่มต้นสำหรับแอพลิเคชันของคุณโดยใช้สองรูปแบบสีขาวและสีเข้ม สามารถใช้ธีมได้โดยใช้คลาสเค้าโครง [ธีม]กับองค์ประกอบหลัก

ตัวอย่าง

...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

คลาสผู้ช่วย

Framework7 มีคลาสตัวช่วยเพิ่มเติมซึ่งสามารถใช้ภายนอกหรือไม่มีธีมตามรายการด้านล่าง -

• color-[color] - สามารถใช้เพื่อเปลี่ยนสีข้อความของบล็อกหรือสีของปุ่มลิงค์ไอคอน ฯลฯ

• bg-[color] - ตั้งค่าสีพื้นหลังที่กำหนดไว้ล่วงหน้าบนบล็อกหรือองค์ประกอบ

• border-[color] - ตั้งค่าสีเส้นขอบที่กำหนดไว้ล่วงหน้าบนบล็อกหรือองค์ประกอบ