Komponenty instruktażowe – omówienie

Komponenty HowTo

„Jak to zrobić: komponenty” to zbiór komponentów internetowych, które implementują typowe wzorce interfejsu. Ich celem jest dostarczanie materiałów edukacyjnych. Możesz zapoznać się z szczegółowo skomentowaną implementacją różnych komponentów i być może czegoś się z niej nauczysz. Pamiętaj, że te komponenty NIE stanowią bibliotekę interfejsu użytkownika i NIE powinny być używane w wersji produkcyjnej.

Komponenty

  • <howto-checkbox>: reprezentuje opcję logiczną w formularzu. Najczęstszym typem pola wyboru jest pole podwójne, które umożliwia użytkownikowi przełączanie się między 2 opcjami: zaznaczone i niezaznaczone.
  • <howto-tabs>: ogranicza widoczne treści, dzieląc je na kilka paneli.
  • <howto-tooltip>: wyskakujące okienko, które wyświetla informacje dotyczące elementu, gdy ten zostanie wybrany za pomocą klawiatury lub gdy kursor myszy się na nim pojawi.

Cele

Naszym celem jest przedstawienie sprawdzonych metod tworzenia niezawodnych komponentów, które są dostępne, wydajne, łatwe w utrzymaniu i łatwe do stylizowania. Każdy komponent jest całkowicie samodzielny, więc może służyć jako implementacja referencyjna.

Ułatwienia dostępu

Komponenty ściśle przestrzegają zaleceń dotyczących tworzenia treści z użyciem ARIA, które stanowią przewodnik po ARIA, czyli standardzie ułatwiającym dostęp do aplikacji internetowych. Jeśli nie znasz ARIA, zapoznaj się z wprowadzeniem do tej technologii w artykule WebFundamentals. Każdy komponent zawiera link do odpowiedniej sekcji Praktyk autorskich. Chociaż nie jest to konieczne, zalecamy zapoznanie się z odpowiednią sekcją w praktykach autorskich przed rozpoczęciem pracy nad kodem.

Wyniki

W rozwoju stron internetowych termin „skuteczność” może odnosić się do wielu różnych rzeczy. W kontekście <howto> wydajność odnosi się głównie do animacji, które działają z jednolitą prędkością 60 kl./s nawet na urządzeniach mobilnych.

Elastyczność wizualna

W miarę możliwości komponenty nie są stylizowane, z wyjątkiem układu lub wskazania stanu wybranego lub aktywnego. Dzięki temu implementacja będzie elastyczna i skupiona na wizualnym aspekcie. Nie marnując czasu na ozdoby, ograniczamy kod do elementów absolutnie niezbędnych do działania komponentu. Jeśli do działania komponentu wymagany jest jakikolwiek styl, zostanie on oznaczony komentarzem wyjaśniającym, dlaczego jest to konieczne.

Kod łatwy do utrzymania

Ponieważ HowTo: Components to implementacja referencyjna, poświęciliśmy dodatkowy czas na napisanie czytelnego i łatwo zrozumiałego kodu z gęstymi komentarzami.

Cele niebędące celami

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

Komponenty <howto> nie są publikowane w npm, bower ani na żadnej innej platformie, ponieważ nie są przeznaczone do użytku produkcyjnego. Aby zapewnić czytelny kod, używamy nowoczesnych interfejsów API JavaScriptu i obsługujemy nowoczesne przeglądarki, które implementują standardy komponentów sieciowych. Po zapoznaniu się z tymi implementacjami będziesz mieć możliwość dostosowania kodu do własnych potrzeb.

Zgodność wsteczna

Nie należy polegać bezpośrednio na kodzie. Jeśli odkryjemy lepszą implementację, możemy zmienić ją i interfejs API dowolnego elementu. To stale aktualizowane źródło, w którym możemy udostępniać, odkrywać i omawiać sprawdzone metody tworzenia interfejsów internetowych.

być kompletne.

Obecnie nie implementujemy (i prawdopodobnie nie będziemy implementować) *wszystkich *komponentów, które można znaleźć w WAI ARIA Authoring Practices. Jednak ponowne użycie zasad stosowanych w innych komponentach <howto> powinno umożliwić czytelnikom wdrożenie brakujących komponentów.