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