„HowTo: Components” to kolekcja komponentów internetowych, które implementują typowe wzorce interfejsu. Te implementacje mają służyć jako materiały edukacyjne. Możesz zapoznać się z obszernie skomentowaną implementacją różnych komponentów i wyciągnąć z niej wnioski. Pamiętaj, że NIE jest to biblioteka interfejsu i NIE należy jej używać w środowisku produkcyjnym.
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 – zaznaczoną i niezaznaczoną.<howto-tabs>: ogranicza widoczne treści, dzieląc je na kilka paneli.<howto-tooltip>: wyskakujące okienko, które wyświetla informacje związane z elementem, gdy element zostanie zaznaczony za pomocą klawiatury lub najechania kursorem myszy.
Cele
Naszym celem jest pokazanie sprawdzonych metod tworzenia solidnych komponentów, które są dostępne, wydajne, łatwe w utrzymaniu i stylizacji. Każdy komponent jest całkowicie samodzielny, dzięki czemu może służyć jako implementacja referencyjna.
Ułatwienia dostępu
Komponenty są ściśle zgodne z praktykami tworzenia treści WAI ARIA, które są przewodnikiem wyjaśniającym i pokazującym ARIA, czyli standard Accessible Rich Internet Application. Jeśli nie znasz ARIA, zapoznaj się z naszym wprowadzeniem na WebFundamentals. Każdy komponent zawiera link do odpowiedniej sekcji dokumentu „Authoring Practices”. Chociaż nie jest to konieczne, przed rozpoczęciem kodowania zalecamy zapoznanie się z sekcją dotyczącą praktyk tworzenia.
Wydajność
W przypadku tworzenia stron internetowych termin „wydajność” może odnosić się do wielu rzeczy. W kontekście <howto> wydajność odnosi się głównie do animacji, które działają stabilnie z częstotliwością 60 kl./s, nawet na urządzeniach mobilnych.
Elastyczność wizualna
Komponenty nie są stylizowane, z wyjątkiem układu lub wskazania wybranego lub aktywnego stanu. Dzięki temu implementacja jest elastyczna wizualnie i skoncentrowana. Nie tracąc czasu na dekoracje, ograniczamy kod tylko do tego, co jest absolutnie niezbędne do działania komponentu. Jeśli do działania komponentu wymagany jest jakiś styl, zostanie on oznaczony komentarzem wyjaśniającym, dlaczego tak jest.
Kod łatwy w utrzymaniu
HowTo: Components to implementacja referencyjna, dlatego poświęciliśmy dodatkowy czas na napisanie czytelnego i łatwego do zrozumienia kodu, który jest gęsto opatrzony komentarzami.
Co nie jest celem
być biblioteką, platformą ani zestawem narzędzi;
Komponenty <howto> nie są publikowane na platformie npm, bower ani żadnej innej, ponieważ nie są przeznaczone do użytku produkcyjnego. Aby kod był zwięzły i czytelny, używamy nowoczesnych interfejsów API JavaScriptu i obsługujemy nowoczesne przeglądarki, które implementują standardy komponentów internetowych. Po zapoznaniu się z tymi implementacjami będziesz w stanie dostosować kod do własnych potrzeb.
być zgodne wstecznie,
Nie należy polegać bezpośrednio na kodzie. Możemy, i najprawdopodobniej będziemy, drastycznie zmieniać implementację i interfejs API dowolnego elementu, jeśli odkryjemy lepszą implementację. To dynamiczne źródło informacji, w którym możemy udostępniać, odkrywać i omawiać sprawdzone metody tworzenia interfejsów internetowych.
być kompletne,
Nie implementujemy (i prawdopodobnie nie będziemy implementować) wszystkich komponentów, które można znaleźć w WAI ARIA Authoring Practices. Jednak ponowne wykorzystanie zasad stosowanych w innych komponentach <howto> powinno umożliwić czytelnikom wdrożenie brakujących komponentów.