Komponent nawigacji w karcie

Projektowanie dostępnego menu kart do przełączania widoków bez ponownego załadowywania strony

Kartki poziome, zgodnie z górnym rozmieszczeniem, są zaprojektowane dla użytkowania na stolarkach, oferując jasne i intuicyjne rozwiązanie do przełączania między różnymi widokami.

W przypadku gęstych ustawień opcjonalna kolumna wyrównana do lewej może służyć do maksymalizacji wykorzystania przestrzeni.

Używanie podkreślonego wskaznika lub tła kuli; jedna aktywna karta tylko

Komponenty nawigacyjne powinny zazwyczaj ograniczać się do 6–8 elementów, aby utrzymać użyteczność i uniknąć przewlekłego nacisku na użytkownika.

Jeśli potrzebnych jest więcej niż osiem kart, menu rozwijane oznakowane jako „Więcej” oferuje alternatywną opcję nawigacji.

Użyj role="tablist" , role="tab" , role="tabpanel" . Zarządzaj arią wyboru

Komponent wykorzystuje semantyczne role HTML5 – ‘tablist’, ‘tab’ i ‘tabpanel’ – do oszczędności dla użytkowników z ograniczeniami w zakresie dostępu oraz odpowiedniej struktury.

Atrybuty ARIA są używane do zarządzania stanem każdego zakładki, w tym domyślnym, nadawaniu (wskazanym przez widoczny pasek), skupieniu (zaznaczonego poprzez widoczne koło) i aktywnym. Aktywna zakładka używa indywidualnego koloru podkreślającego z odpowiednim kontrastem tekstu do czytelności.

Często zadawane pytania

Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz Hash Function Avalanche Visualizer i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.