Komponenty HowTo
„Jak to zrobić: komponenty” to zbiór komponentów internetowych, które implementują typowe wzorce interfejsu. Mają one służyć jako materiały edukacyjne. 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 NIEstanowią bibliotekę interfejsu użytkownika i NIEpowinny 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 – 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 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 solidnych 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 tworzenia aplikacji internetowych z uwzględnieniem dostępności. 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 rozwijaniu 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 bardziej elastyczna i skupiona. 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ą, frameworkiem 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ć zwięzły i czytelny kod, używamy nowoczesnych interfejsów API JavaScriptu i obsługujemy nowoczesne przeglądarki, które implementują standardy komponentów sieciowych. Po przeczytaniu tych implementacji 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 wdrażamy (i prawdopodobnie nie będziemy wdrażać) *wszystkich *komponentów, które można znaleźć w praktykach autorskich WAI ARIA. Jednak ponowne użycie zasad stosowanych w innych komponentach <howto> powinno umożliwić czytelnikom wdrożenie brakujących komponentów.