Polymer การใช้งาน Elements

หลังจากที่ได้รู้จัก Polymer ไปบ้างแล้ว ใน ตอนที่ 1 ยังจำ องค์ประกอบของ Polymer กันได้ใช่ไหมครับ ถ้าใครยังจำไม่ได้ ลองกลับไปดู ใน บทความนี้ก่อนเลย รู้จัก Polymer-Project : Web Application Framework พร้อมเริ่มต้น แบบ Basic

วันนี้ผมจะมาพูดถึงการใช้งาน เจ้า Elements (สีเขียว) นั้นเองครับ

Elements (สีเขียว) ส่วนนี้คือ Web Components หรือ UI สำเร็จรูปที่ Polymer สร้างเตรียมไว้ให้เราใช้งานได้ทันที โดยส่วนใหญ่ใช้การออกแบบตามแนวทาง Material Design

ซึ่งการใช้มันก็ง่ายมากเลย และทำให้สะดวกมากขึ้นในการออกแบบเว็บของเรา ซึ่งมีให้เลือกใช้หลากหลาย ลองดูเพิ่มเติมในนี้ Elements

โดยทาง polymer จะแบ่งออก เป็น Catalog ตามสะดวกในการใช้งาน

วิธีการใช้ก็ง่าย ๆ ครับ แค่เลือก Elementsที่เราต้องการจะใช้งาน ตัวอย่างเช่น ผมจะใช้ Icons ใน Elements ผมขอเลือกเป็นของ Iron Elements หรือใครต้องการ อย่างอื่นลองใช้ Search Elements (รูปแว่นขยาย) ดูก็ได้ครับ

icon ของ Iron Elements ซึ่งมีเยอะกว่านี้

โดยถ้าจะใช้งาน Elements ไหนต้อง ทำการ Bower Command ลงมาที่ Project เราก่อน

เมื่อเราทำการ Download เสร็จแล้ว ก็จะเข้ามาอยู่ภายใต้ bower_components

การที่จะเรียกใช้ ให้ Import file ที่ต้องการจะเรียกใช้ขึ้นมา

ดูว่า icon ที่เราต้องการจะใช้เป็นประเภทไหน ได้ที่ https://elements.polymer-project.org/elements/iron-icons?view=demo:demo/index.html&active=iron-icons

iron-icons ประเภท Maps

เราสามารถตงแต่ง icon ง่าย ๆ ด้วยคำสั่ง css

Blog นี้ผมอาจจะเขียน งง ๆ เพื่อน ๆ คนไหน ไม่เข้าใจตรงส่วนไหนสามารถ สอบถามเพิ่มเติมได้นะครับ

เจอกันใหม่ Blog หน้านะครับ ขอบคุณที่เข้ามาอ่านกันนะครับ ^^

Github : Polymer-Project

Facebook : Surewat Intharasuwan