คอมโพเนนต์วิธีการ – ภาพรวม

คอมโพเนนต์ HowTo

"HowTo: Components" เป็นชุดคอมโพเนนต์ของเว็บที่ใช้ UI ทั่วไป รูปแบบ การนำไปใช้งานเหล่านี้มีจุดประสงค์เพื่อเป็นแหล่งข้อมูลทางการศึกษา คุณสามารถอ่านการใช้งานที่มีความคิดเห็นจำนวนมากเกี่ยวกับ และหวังว่าจะเรียนรู้จากองค์ประกอบเหล่านั้น โปรดทราบว่าแอตทริบิวต์เหล่านี้ไม่ใช่ ไลบรารี UI และไม่ควรใช้ในเวอร์ชันที่ใช้งานจริง

  • <howto-checkbox>: แสดงตัวเลือกบูลีนในแบบฟอร์ม ประเภทที่พบบ่อยที่สุด ช่องทำเครื่องหมายเป็นแบบ 2 แบบซึ่งให้ผู้ใช้สลับระหว่างตัวเลือก 2 แบบ คือ เลือกไว้และยกเลิกการเลือก
  • <howto-tabs>: จำกัดเนื้อหาที่มองเห็นได้โดยการแยกเนื้อหาออกเป็นหลายแผง
  • <howto-tooltip>: ป๊อปอัปที่แสดงข้อมูลที่เกี่ยวข้องกับองค์ประกอบเมื่อองค์ประกอบนั้น ได้รับโฟกัสของแป้นพิมพ์หรือเมื่อเมาส์อยู่เหนือโฟกัส

เป้าหมาย

เป้าหมายของเราคือการแสดงแนวทางปฏิบัติแนะนำในการเขียนองค์ประกอบที่มีประสิทธิภาพ เข้าถึงได้ มีประสิทธิภาพ ดูแลรักษาได้ง่าย และจัดรูปแบบได้ง่าย คอมโพเนนต์แต่ละอย่าง ครบถ้วนสมบูรณ์ในตัวเอง เพื่อให้ใช้เป็นข้อมูลอ้างอิงได้

การช่วยเหลือพิเศษ

องค์ประกอบคล้ายกับ WAI ARIA Authoring แนวทางปฏิบัติ ซึ่งเป็นคำแนะนำเกี่ยวกับ อธิบายและแสดง ARIA แอปพลิเคชันอินเทอร์เน็ตที่รองรับการเข้าถึงอย่างละเอียด (Accessible Rich Internet Application) มาตรฐาน หากคุณไม่คุ้นเคยกับ ARIA ลองดูการแนะนำตัวของเราเกี่ยวกับ WebFundamentals ส่วนประกอบแต่ละอย่างจะลิงก์ไปยังส่วนที่เกี่ยวข้องของหลักปฏิบัติการเขียน ขณะที่ ไม่จำเป็นโดยเฉพาะ เราขอแนะนำให้อ่านหัวข้อ การเขียน แนวทางปฏิบัติก่อนเจาะลึกในโค้ด

ประสิทธิภาพ

ในการพัฒนาเว็บ คำว่า "ประสิทธิภาพ" ใช้ได้กับหลากหลาย สิ่งต่างๆ ในบริบทของ <howto> ประสิทธิภาพส่วนใหญ่หมายถึงภาพเคลื่อนไหว ทำงานที่ 60fps อย่างต่อเนื่องแม้บนอุปกรณ์เคลื่อนที่

ความยืดหยุ่นของภาพ

คอมโพเนนต์ต่างๆ จะไม่มีการจัดรูปแบบเท่าที่จะเป็นไปได้ ยกเว้นการจัดวางหรือเพื่อบ่งบอก สถานะที่เลือกหรือใช้งานอยู่ ทั้งนี้เพื่อให้การติดตั้งใช้งานมองเห็นได้อย่างยืดหยุ่น และมีสมาธิจดจ่อ เราไม่เสียเวลาในการตกแต่ง เราจึงจำกัดการใช้โค้ดไว้ที่ มีความจำเป็นอย่างยิ่งในการทำให้คอมโพเนนต์ทำงาน หากจำเป็นต้องใช้รูปแบบ คอมโพเนนต์จะทำงานได้ สไตล์จะมีเครื่องหมายความคิดเห็น อธิบายถึงสาเหตุ

โค้ดที่ดูแลรักษาได้

เป็นวิธีการ: คอมโพเนนต์เป็นข้อมูลอ้างอิง เราใช้เวลาไปกับการเขียนให้อ่านง่าย โค้ดที่เข้าใจง่ายซึ่งมีการแสดงความคิดเห็นอย่างหนาแน่น

ไม่ใช่เป้าหมาย

เป็นไลบรารี / เฟรมเวิร์ก / ชุดเครื่องมือ

คอมโพเนนต์ <howto> ไม่ได้เผยแพร่บน npm, เบราว์เซอร์ หรือแพลตฟอร์มอื่นๆ เนื่องจากไม่ได้มีไว้เพื่อใช้ในเวอร์ชันที่ใช้งานจริง ก่อนอื่น ที่อ่านได้ เราใช้ JavaScript API ที่ทันสมัย และรองรับ เบราว์เซอร์ที่ใช้มาตรฐานคอมโพเนนต์เว็บ คุณ จะสามารถปรับเปลี่ยนโค้ดให้เหมาะกับความต้องการของคุณหลังจากอ่านข้อความเหล่านี้ การนำไปใช้งานจริง

เข้ากันได้แบบย้อนหลัง

ไม่ควรใช้โค้ดโดยตรง เราอาจจะจะ และ เปลี่ยนการใช้งานและ API ขององค์ประกอบต่างๆ ไปอย่างมาก ก็พบการนำไปใช้ นี่คือแหล่งข้อมูลที่ยังมีชีวิตที่เราสามารถแบ่งปัน สำรวจและอภิปรายเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดในการสร้าง UI ของเว็บ

มีข้อมูลครบถ้วน

ปัจจุบันเราไม่ได้ (และอาจไม่) ใช้คอมโพเนนต์ *ทั้งหมด *ที่สามารถ ใน WAI ARIA Authoring Practices แต่การนำหลักการที่ใช้ ในคอมโพเนนต์ <howto> อื่นๆ ควรทำให้ผู้อ่านใช้งานคอมโพเนนต์ใดก็ได้ ที่ขาดหายไป