"HowTo: Components" (Cách thực hiện: Thành phần) là một tập hợp các thành phần web triển khai các mẫu giao diện người dùng phổ biến. Mục đích của các cách triển khai này là để làm tài nguyên giáo dục. Bạn có thể đọc qua cách triển khai có nhiều chú thích của các thành phần khác nhau và hy vọng có thể học hỏi từ đó. Xin lưu ý rằng các thành phần này rõ ràng KHÔNG phải là một thư viện giao diện người dùng và KHÔNG nên được dùng trong môi trường thực tế.
Thành phần
<howto-checkbox>: đại diện cho một lựa chọn boolean trong biểu mẫu. Loại hộp đánh dấu phổ biến nhất là loại kép, cho phép người dùng chuyển đổi giữa hai lựa chọn: đã đánh dấu và chưa đánh dấu.<howto-tabs>: giới hạn nội dung hiển thị bằng cách tách nội dung thành nhiều bảng điều khiển.<howto-tooltip>: một cửa sổ bật lên hiển thị thông tin liên quan đến một phần tử khi phần tử đó nhận được tiêu điểm bàn phím hoặc khi người dùng di chuột qua phần tử đó.
Mục tiêu
Mục tiêu của chúng tôi là minh hoạ các phương pháp hay nhất để viết các thành phần mạnh mẽ, dễ tiếp cận, hiệu quả, dễ bảo trì và dễ tạo kiểu. Mỗi thành phần đều hoàn toàn độc lập nên có thể đóng vai trò là một phương thức triển khai tham chiếu.
Hỗ trợ tiếp cận
Các thành phần này tuân thủ chặt chẽ WAI ARIA Authoring Practices (Thực tiễn tác giả WAI ARIA), một hướng dẫn giải thích và trình bày ARIA, tiêu chuẩn Ứng dụng Internet đa dạng có thể truy cập. Nếu bạn chưa quen với ARIA, hãy xem phần giới thiệu của chúng tôi về WebFundamentals. Mỗi thành phần liên kết đến phần có liên quan trong Quy tắc biên soạn. Mặc dù không nhất thiết, nhưng bạn nên đọc phần Thực hành soạn thảo trước khi tìm hiểu sâu về mã.
Hiệu suất
Trong quá trình phát triển web, thuật ngữ "hiệu suất" có thể được áp dụng cho nhiều
thứ. Trong bối cảnh của <howto>, hiệu suất chủ yếu đề cập đến ảnh động chạy liên tục ở tốc độ 60 khung hình/giây, ngay cả trên thiết bị di động.
Tính linh hoạt về hình ảnh
Các thành phần không được tạo kiểu nhiều nhất có thể, ngoại trừ bố cục hoặc để cho biết trạng thái đã chọn hoặc đang hoạt động. Điều này giúp việc triển khai trở nên linh hoạt và tập trung hơn về mặt hình ảnh. Bằng cách không dành thời gian cho việc trang trí, chúng ta giới hạn mã ở mức chỉ cần thiết để làm cho thành phần hoạt động. Nếu thành phần cần có kiểu nào đó để hoạt động, thì kiểu đó sẽ được đánh dấu bằng một nhận xét giải thích lý do.
Mã dễ bảo trì
Vì HowTo: Components là một cách triển khai tham chiếu, nên chúng tôi đã dành thêm thời gian để viết mã dễ đọc và dễ hiểu, có nhiều chú thích.
Không phải mục tiêu
Là một thư viện/khung/bộ công cụ
Các thành phần <howto> không được xuất bản trên npm, bower hoặc bất kỳ nền tảng nào khác vì chúng không được dùng trong môi trường thực tế. Để mã ngắn gọn và dễ đọc, chúng tôi sử dụng các API JavaScript hiện đại và hỗ trợ các trình duyệt hiện đại triển khai tiêu chuẩn Thành phần web. Bạn có thể điều chỉnh mã cho phù hợp với nhu cầu của mình sau khi đọc các cách triển khai này.
Tương thích ngược
Bạn không nên trực tiếp dựa vào mã này. Chúng tôi có thể và rất có thể sẽ thay đổi đáng kể cách triển khai và API của bất kỳ phần tử nào nếu phát hiện thấy cách triển khai tốt hơn. Đây là một tài nguyên sống, nơi chúng ta có thể chia sẻ, khám phá và thảo luận về các phương pháp hay nhất để xây dựng giao diện người dùng web.
Đầy đủ
Chúng tôi không (và có thể sẽ không) triển khai *tất cả *thành phần có trong WAI ARIA Authoring Practices (Các phương pháp biên soạn WAI ARIA). Tuy nhiên, việc sử dụng lại các nguyên tắc được dùng trong các thành phần <howto> khác sẽ giúp người đọc triển khai mọi thành phần còn thiếu.