การใส่ Style ให้ปุ่มต่าง ๆ บน Wave Maker

| ไอที | WaveMaker | 2349

การใส่ Style ให้ปุ่มต่าง ๆ บน Wave Maker


ในบทความที่แล้ว เรื่อง Hello World เราได้สร้าง label ที่แสดงคำว่า Hello World บน Wavemaker แต่ตัวหนังสือที่แสดงมีขนาดเล็กมาจนมองไม่เห็นและยังอยู่ในตำแหน่งที่ไม่ค่อยสวยงาม ในคราวนี้ ผมจะมาอธิบายการใส่ Style ให้กับปุ่มต่าง ๆ ครับ

การใส่ Style ให้กับปุ่ม Label



อันดับแรกให้เราคลิก label อันที่ต้องการเปลี่ยน Style ก่อนครับ จากนั้นทางแถบด้านขวา ให้คลิกที่คำว่า Style จะได้ดังรูปด้านล่างครับ


ให้ดูแถบทางด้านขวามือจะมีแถบที่สำคัญอยู่ 3 แถบ นั่นคือ

1. แถบ ใส่ Style แบบ Basic ดังรูปด้านล่างครับ

แถบนี้เป็นแถบที่กำหนดเกี่ยวกับ border(กรอบ), borderColor(สีของกรอบ), margin(ขอบนอก), padding(ขอบใน)

2. แถบ ใส่ Style แบบ Classes ดังรูปด้านล่างครับ

แถบนี้จะเป็นแถบที่กำหนดเกี่ยวกับ ลักษณะของอักษรต่าง ๆ ไม่ว่าจะเป็น ขนาดของตัวอักษร สีของตัวอักษร และยังรวมไปถึงลักษณะอื่น ๆ ของกรอบ เงาต่าง ๆ พื้นหลังต่าง ๆ และยังสามารถกำหนดลักษณะของเมาส์ได้ด้วย

3. แถบ ใส่ Style แบบ Custom ดังรูปด้านล่างครับ

แถบนี้จะเป็นแถบที่ว่าง ๆ สำหรับไว้ใส่สคิป CSS เข้าไป

ต่อไปเรามาดูตัวอย่างการใส่ Style กันดูครับ


ตัวอย่างที่ 1


ตัวอย่างนี้เรา border=5 จึงทำให้มีกรอบหนา 5px ครับ ดังรูปด้านล่าง


ตัวอย่างที่ 2


ตัวอย่างนี้เราได้กำหนดขนาดตัวอักษรเป็น 24px มีสีเป็นสี BrightRed มีเส้นใต้ และกรอบข้างบนเราได้กำหนดเป็น Curved12px เพื่อให้มันโค้ง ตามรูปด้านล่างครับ


ตัวอย่างที่ 3


ตัวอย่างนี้เราได้เพิ่ม สีพื้นหลังให้เป็นสีเขียว โดยการใส่คำว่า background-color:#0F0; จะได้ดังรูปด้านล่าง



comments