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