Komponenty instruktażowe – omówienie

Składniki instrukcji

„Instrukcje: komponenty” to zbiór komponentów sieciowych, które implementują typowe wzorce interfejsu użytkownika. Wdrożenie tych zasad ma na celu zapewnienie materiałów edukacyjnych. Znajdziesz w nim szczegółowo omawiane implementacje różnych komponentów i mam nadzieję, że będziesz ich wyciągać wnioski. Pamiętaj, że wyraźnie NIE są one biblioteką interfejsu i NIE należy ich używać w środowisku produkcyjnym.

Komponenty

  • <howto-checkbox>: reprezentuje opcję wartości logicznej w formularzu. Najczęściej jest to pole wyboru typu podwójny, które umożliwia użytkownikowi przełączanie się między 2 opcjami: zaznaczoną i odznaczoną.
  • <howto-tabs>: ogranicza widoczność treści, dzieląc ją na kilka paneli.
  • <howto-tooltip>: wyskakujące okienko z informacjami związanymi z elementem, gdy zaznaczy się on na klawiaturze lub najedzie na niego kursorem myszy.

Cele

Naszym celem jest zaprezentowanie sprawdzonych metod tworzenia solidnych komponentów, które są dostępne, wydajne, łatwe w utrzymaniu i łatwe w dobrym stylu. Każdy komponent jest całkowicie samodzielne, więc może służyć jako implementacja referencyjna.

Ułatwienia dostępu

Komponenty te są ściśle zgodne z zasadami WAI ARIA AuthoringPractices, które zawierają opis standardu Accessible Rich Internet Application oraz objaśnianie i prezentowanie ARIA. Jeśli nie znasz jeszcze ARIA, przeczytaj wprowadzenie na temat WebFundamentals. Każdy z nich zawiera link do odpowiedniej sekcji artykułu poświęconej metodom tworzenia treści. Chociaż nie jest to bezwzględnie konieczne, przed zagłębieniem się w kod zalecamy zapoznanie się z sekcją podręcznika tworzenia treści.

Występy

W programowaniu stron internetowych termin „wydajność” odnosi się do wielu różnych rzeczy. W kontekście <howto> wydajność odnosi się głównie do animacji wyświetlanych stale z prędkością 60 kl./s, nawet na urządzeniach mobilnych.

Elastyczność wizualna

W miarę możliwości komponenty nie mają stylu, z wyjątkiem układu lub stanu wybranego bądź aktywnego. Dzięki temu implementacja jest elastyczna i konkretna. Nie poświęcając czasu na elementy dekoracyjne, ograniczamy kod tylko do tego, co jest absolutnie niezbędne do stworzenia funkcji komponentu. Jeśli do działania komponentu wymagany jest styl, zostanie on oznaczony komentarzem wyjaśniającym, dlaczego tak się dzieje.

Kod do obsługi

Ponieważ instrukcja: komponenty są implementacją referencyjną, poświęciliśmy więcej czasu na napisanie czytelnego i zrozumiałego kodu z gęsto komentowanym tekstem.

Inne cele

być biblioteką, strukturą lub zestawem narzędzi;

Komponenty <howto> nie są opublikowane w usłudze npm, bower ani na żadnej innej platformie, ponieważ nie są przeznaczone do użytku w środowisku produkcyjnym. Aby zadbać o obszerny, czytelny kod, wykorzystujemy nowoczesne interfejsy API JavaScript i obsługujemy nowoczesne przeglądarki, w których zaimplementowane są standardy komponentów sieciowych. Po zapoznaniu się z tymi wdrożeniami będziesz w stanie dostosować kod do swoich potrzeb.

mieć zgodność wsteczną;

Nie należy bezpośrednio polegać na kodzie. Jeśli wykryjemy lepsze wdrożenie, możemy – i najprawdopodobniej wprowadzimy, radykalnie zmienić implementację oraz interfejs API dowolnego elementu. To miejsce, w którym możemy dzielić się, odkrywać i omawiać sprawdzone metody tworzenia interfejsów internetowych.

być kompletne,

Obecnie nie wdrażamy (i prawdopodobnie nie będziemy) *wszystkich *komponentów, które można znaleźć w zasadach tworzenia treści WAI ARIA. Ponowne wykorzystanie zasad używanych w innych komponentach <howto> powinno jednak umożliwić czytelnikom wdrożenie wszystkich brakujących komponentów.