Thành phần HowTo – Tổng quan

Thành phần hướng dẫn

"Hướng dẫ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 những cách triển khai này là để cung cấp tài nguyên giáo dục. Bạn có thể đọc qua cách triển khai các thành phần khác nhau được bình luận rất nhiều và hy vọng có thể học hỏi từ chúng. Xin lưu ý rằng đây rõ ràng KHÔNG PHẢI là thư viện giao diện người dùng và KHÔNG nên dùng trong phiên bản chính thức.

Thành phần

  • <howto-checkbox>: đại diện cho một tuỳ chọn boolean trong một 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à bỏ đánh dấu).
  • <howto-tabs>: giới hạn nội dung hiển thị bằng cách chia 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 chuột di chuột qua phần tử đó.

Bàn thắng

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ễ truy cập, hiệu suất cao, dễ bảo trì và dễ tạo kiểu. Mỗi thành phần hoàn toàn độc lập nên có thể đóng vai trò là cách 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ẽ Các phương pháp tạo tác giả cho WAN ARIA, đây là hướng dẫn giải thích và cho thấy ARIA, tiêu chuẩn Ứng dụng Internet đa dạng thức dễ tiếp cận. Nếu bạn chưa hiểu rõ về ARIA, hãy xem giới thiệu của chúng tôi về Kiến thức cơ bản về web. Mỗi thành phần đều liên kết đến phần có liên quan trong phần Phương pháp ghi nhận tác giả. Mặc dù không thực sự cần thiết, nhưng bạn nên đọc phần Thực hành tạo tác giả trước khi tìm hiểu kỹ hơn 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 trong nhiều mục đích. Trong bối cảnh của <howto>, hiệu suất chủ yếu đề cập đến ảnh động chạy một cách nhất quán ở tốc độ 60 khung hình/giây, ngay cả trên thiết bị di động.

Độ linh hoạt về thị giác

Nhiều nhất có thể, các thành phần không được tạo kiểu, 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 nhằm đảm bảo quá trình triển khai luôn linh hoạt và có trọng tâm. Bằng cách không dành thời gian trang trí, chúng tôi chỉ giới hạn mã ở những phần thực sự cần thiết để tạo hàm thành phần. Nếu cần có một kiểu để thành phần hoạt động, 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: Các thành phần là một cách triển khai tham chiếu, chúng tôi đã dành thêm thời gian để viết mã dễ đọc và dễ hiểu được nhận xét dày đặc.

Không phải mục tiêu

Là thư viện / khung / bộ công cụ

Các thành phần <howto> không được phát hành trên npm, Supplyer hoặc bất kỳ nền tảng nào khác vì không được dùng trong phiên bản chính thức. Để ngắn gọn, mã có thể đọc được, chúng tôi sẽ sử dụng API JavaScript hiện đại và hỗ trợ các trình duyệt hiện đại triển khai các tiêu chuẩn về Thành phần web. Bạn sẽ 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.

Có khả năng tương thích ngược

Bạn không nên dựa trực tiếp vào mã. 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 ra cách triển khai tốt hơn. Đây là tài nguyên sống độ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.

Hoàn thiện

Hiện tại, chúng tôi không (và có thể sẽ không) triển khai *tất cả *thành phần có thể tìm thấy trong Thực hành cấp quyền sử dụng WAI ARIA. Tuy nhiên, việc sử dụng lại các nguyên tắc dùng trong các thành phần <howto> khác sẽ cho phép độc giả triển khai mọi thành phần còn thiếu.