คอมโพเนนต์ HowTo
"วิธีการ: คอมโพเนนต์" คือคอลเล็กชันคอมโพเนนต์ของเว็บที่ใช้รูปแบบ UI ทั่วไป วัตถุประสงค์ของการใช้งานเหล่านี้คือเพื่อเป็นแหล่งข้อมูลทางการศึกษา คุณสามารถอ่านการใช้งานคอมโพเนนต์ต่างๆ ที่มีคําอธิบายประกอบอย่างละเอียดและหวังว่าจะได้เรียนรู้จากตัวอย่างเหล่านั้น โปรดทราบว่าฟีเจอร์เหล่านี้ไม่ใช่ไลบรารี UI อย่างชัดแจ้ง และไม่ควรใช้ในเวอร์ชันที่ใช้งานจริง
คอมโพเนนต์
<howto-checkbox>: แสดงตัวเลือกบูลีนในแบบฟอร์ม ช่องทําเครื่องหมายประเภทที่พบบ่อยที่สุดคือประเภทคู่ ซึ่งช่วยให้ผู้ใช้สลับระหว่าง 2 ตัวเลือกได้ นั่นคือ เลือกและไม่เลือก<howto-tabs>: จำกัดเนื้อหาที่มองเห็นได้โดยแยกออกเป็นหลายแผง<howto-tooltip>: ป๊อปอัปที่แสดงข้อมูลที่เกี่ยวข้องกับองค์ประกอบเมื่อองค์ประกอบได้รับโฟกัสจากแป้นพิมพ์หรือเมาส์วางเหนือองค์ประกอบนั้น
เป้าหมาย
เป้าหมายของเราคือการสาธิตแนวทางปฏิบัติแนะนำในการเขียนคอมโพเนนต์ที่มีประสิทธิภาพ ซึ่งเข้าถึงได้ มีประสิทธิภาพ ดูแลรักษาได้ และจัดสไตล์ได้ง่าย คอมโพเนนต์แต่ละรายการจะทำงานได้ด้วยตัวเองทั้งหมด จึงใช้เป็นการใช้งานอ้างอิงได้
การช่วยเหลือพิเศษ
คอมโพเนนต์เหล่านี้เป็นไปตามแนวทางปฏิบัติด้านการเขียนโปรแกรม WAI ARIA อย่างใกล้ชิด ซึ่งเป็นคำแนะนำในการอธิบายและแสดง ARIA ซึ่งเป็นมาตรฐานแอปพลิเคชันบนอินเทอร์เน็ตแบบริชมีเดียที่เข้าถึงได้ หากไม่คุ้นเคยกับ ARIA โปรดดูข้อมูลเบื้องต้นใน WebFundamentals คอมโพเนนต์แต่ละรายการจะลิงก์ไปยังส่วนที่เกี่ยวข้องของแนวทางการเขียน แม้ว่าจะไม่จำเป็น แต่เราขอแนะนำให้อ่านส่วนแนวทางการเขียนก่อนที่จะลงมือเขียนโค้ด
ประสิทธิภาพ
ในการพัฒนาเว็บ คำว่า "ประสิทธิภาพ" สามารถใช้กับสิ่งต่างๆ ได้มากมาย ในบริบทของ <howto> ประสิทธิภาพส่วนใหญ่หมายถึงภาพเคลื่อนไหวที่ทำงานอย่างสม่ำเสมอที่ 60 FPS แม้ในอุปกรณ์เคลื่อนที่
ความยืดหยุ่นของภาพ
คอมโพเนนต์จะไม่มีการจัดสไตล์มากที่สุดเท่าที่จะเป็นไปได้ ยกเว้นเลย์เอาต์หรือเพื่อบ่งบอกสถานะที่เลือกหรือใช้งานอยู่ วิธีนี้ช่วยให้การติดตั้งใช้งานมีความยืดหยุ่นและมุ่งเน้นที่ภาพ การไม่เสียเวลากับการตกแต่งทำให้เราจำกัดโค้ดไว้เฉพาะสิ่งที่จําเป็นอย่างยิ่งต่อการทำงานของคอมโพเนนต์ หากจำเป็นต้องใช้สไตล์ใดๆ เพื่อให้คอมโพเนนต์ทำงานได้ ระบบจะทำเครื่องหมายสไตล์นั้นด้วยความคิดเห็นที่อธิบายถึงสาเหตุ
โค้ดที่ดูแลรักษาได้
เนื่องจาก HowTo: Components เป็นการใช้งานอ้างอิง เราจึงใช้เวลาเพิ่มเติมในการเขียนโค้ดที่อ่านง่ายและเข้าใจได้ง่ายๆ พร้อมใส่ความคิดเห็นอย่างละเอียด
ไม่ใช่เป้าหมาย
เป็นไลบรารี / เฟรมเวิร์ก / ชุดเครื่องมือ
คอมโพเนนต์ <howto> ไม่ได้เผยแพร่ใน npm, bower หรือแพลตฟอร์มอื่นๆ เนื่องจากไม่ได้มีไว้สำหรับใช้งานจริง เราใช้ JavaScript API สมัยใหม่และรองรับเบราว์เซอร์สมัยใหม่ที่ใช้งานมาตรฐานคอมโพเนนต์ของเว็บเพื่อให้ได้โค้ดที่กระชับและอ่านง่าย คุณจะปรับเปลี่ยนโค้ดให้เหมาะกับความต้องการของคุณได้หลังจากอ่านการใช้งานเหล่านี้
เข้ากันได้แบบย้อนหลัง
ไม่ควรใช้รหัสนี้โดยตรง เราอาจจะเปลี่ยนแปลงการติดตั้งใช้งานและ API ขององค์ประกอบอย่างสิ้นเชิงหากพบการติดตั้งใช้งานที่ดีกว่า นี่เป็นทรัพยากรที่อัปเดตอยู่เสมอซึ่งเราใช้แชร์ สำรวจ และพูดคุยเกี่ยวกับแนวทางปฏิบัติแนะนำในการสร้าง UI ของเว็บ
สมบูรณ์
ปัจจุบันเราไม่ได้ (และอาจไม่) ใช้คอมโพเนนต์ *ทั้งหมด *ที่พบในแนวทางการเขียน WAI ARIA อย่างไรก็ตาม การใช้หลักการที่ใช้ในคอมโพเนนต์ <howto> อื่นๆ ซ้ำจะช่วยให้ผู้อ่านติดตั้งใช้งานคอมโพเนนต์ที่ขาดหายไปได้