© 2024 Użycie AI według krajów. Wybory/dolnokomórkowe komponenty?

Komponenty wyboru/padującego menu

Komponenty wyboru/padającego menu

Komponenty wyboru i padającego menu są podstawowymi elementami formularzy pozwalającymi użytkownikom na wybór spośród zdefiniowanej listy opcji. Ten przewodnik opisuje najlepsze praktyki tworzenia dostępnych i odpowiedzialnych kontroli.

mysimulator teamZaktualizowano — czerwiec 2026≈ 3 min czytania▶ Otwórz symulację

Komponenty wyboru/padającego menu

Projektuj dostępną kontrolkę wyboru (native i niestandardową) z jasnymi stanami, wyszukiwarką oraz zachowaniem odpowiedzialnym.

Etykieta, przycisk aktywacji (lub native select), wartość/podstawowy tekst, ikona strzałki, tekst pomocniczy, tekst błędu. Wypełnienie 12–14px pionowe, 14–16px poziome; obramowanie 1px neutralne; promieniokrąg 6–8px. Menu używa cienia shadow-2 i obramowania.

Domyślne/stosowane/zakłóceniem pozycji z okręgiem skupienia.

Otwarte: menu anegdoce do triku; przewijalne o maksymalnej wysokości.

Błąd/sukces: semantyczny obramowanie i wiadomość.

demo na żywo · powiązana symulacja● LIVE

Wyłączone: mitygnięta tekstowo, bez reakcji na hover; dezaktywować interakcję z wskazującą strzalką.

Zapewniaj wstawiany wyszukiwarki wierszowej dla list zawierających więcej niż 12 elementów. Obsługiwanie stanu pustego i ładowania. Grupuj opcje za pomocą nagłówków; pozwól na filtrowanie za pomocą klawiszy klawiatury.

Zaplanuj ładowanie asynchroniczne dla bardzo długich list. Wyświetl wybrane chipy wewnątrz triku lub podsumowania (“3 wybrane”). Zapewnij kontrole „Wybierz wszystkie / Wyczyść wszystko”. Navigacja klawiatury musi obsługiwać przełączniki wyboru za pomocą przestrzeni i enter.

Często zadawane pytania

Jakie role powinny być używane dla elementów select i option?

Użyj odpowiednich rol: listbox/option lub natywnego select. Zarządzaj arią-expanded, arią-controls, arią-activedescendant. Trzymaj skupienie wewnątrz menu; zamykaj przy naciśnięciu ESC. Upewnij się, że cele dotykowe mają 44px.

Jak powinny adaptować się menu upuszczane do różnych rozmiarów ekranu, szczególnie na mobilnych urządzeniach?

Całkowita szerokość na mobilnym; menu używa pełnej szerokości, jeśli jest ograniczone przestrzenie. Zwiększ marginesy dotykowe; pozwól, aby wyszukiwanie pozostało widoczne. Unikaj zależności od hover; użyj dotyku do otwierania.

Kiedy to dokument został ostatnio zaktualizowany?

Ostatnia aktualizacja: 2024 | System projektowy

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.

▶ Otwórz symulację Hash Function Avalanche Visualizer