Master the antd Collapse Panel: 2026 Tips & Tricks

Pracujesz nad interfejsem, w którym użytkownik musi podejmować decyzje na podstawie dużej ilości informacji i nagle orientujesz się, żeTwoja strona przypomina parking zwalniający: wszystko naraz na wierzchu, zero priorytetów, użytkownik wędruje pośród chaosu zamiastkoncentrować się na tym, co naprawdę istotne. Problem tkwi w strukturze prezentacji, nie w danych. Komponent Collapse w Ant Design tolek, który pozwala zamienić ten parking w uporządkowany hub z kontrolą nad tym, co użytkownik widzi w danym momencie.

• Konfiguracja paneli za pomocą propsa items
• Tryb akordeonu i opcje rozmiaru
• Stylowanie, ukrywanie strzałki i semantyczne modyfikacje znaczników
• Pytania i odpowiedzi dotyczące komponentu Collapse w Ant Design

Konfiguracja paneli za pomocą propsa items

Od wersji 5.6.0 Ant Design wprowadził deklaratywny sposób definiowania paneli props items przyjmuje tablicę obiektów,gdzie każdy obiekt reprezentuje jeden panel. To podejście eliminuje konieczność ręcznego tworzenia osobnych komponentów Collapse.Panel dla każdego elementu w tablicy. Zamiast tego deklarujesz strukturę, a biblioteka zajmuje się renderowaniem.

Każdy obiekt w tablicy items wymaga klucza key, który identyfikuje panel w strukturze danych. To właśnie tenidentyfikator używasz później, gdy chcesz programowo otworzyć lub zamknąć określony panel z poziomu logiki komponentu nadrzędnego. Props key musi być unikalny w ramach jednego komponentu Collapse inaczej React wygeneruje ostrzeżenie w trybie deweloperskim.

Pole label definiuje nagłówek panelu, który jest klikalny i powoduje przełączanie stanu rozwinięcia. Możeszprzekazać tam zwykły tekst, element React, a nawet komponent, który samodzielnie zarządza wewnętrznym stanem. Ant Designrenderuje etykietę w elemencie <header>, co oznacza, że semantycznie masz dostęp do struktury dokumentu bez dodatkowych nakładów.

Zobacz także antd collapse panel onclick

Zawartość panelu przekazujesz przez właściwość children. To miejsce, gdzie umieszczasz wszystko, co użytkownik zobaczypo rozwinięciu: teksty opisowe, formularze, tabele, wykresy, a nawet zagnieżdżone kolejne komponenty Collapse. Ant Design nie narzucaograniczeń co do głębokości zagnieżdżenia, ale z doświadczenia wiem, że trzy poziomy to już threshold, powyżej któregointerfejs zaczyna sprawiać wrażenie przeładowanego.

Props disabled pozwala wyłączyć interakcję z wybranym panelem. Gdy ustawisz go na true, panel pozostaje statyczny-nie reaguje na kliknięcie, a wizualnie zmienia się przez dodanie klasy .ant-collapse-item-disabled. Mechanizm tendziała poprzez zablokowanie eventu onClick na poziomie komponentu Collapse.Panel, co oznacza, że nawet zagnieżdżoneelementy wewnątrz panelu nie otrzymają focusa w standardowy sposób.

Tryb akordeonu i opcje rozmiaru

Domyślne zachowanie komponentu Collapse w Ant Design pozwala na jednoczesne rozwinięcie dowolnej liczby paneli. Użytkownikmoże kliknąć panel pierwszy, potem panel trzeci, potem wrócić do pierwszego wszystkie pozostają otwarte. Ten tryb sprawdzasię w sytuacjach, gdy informacje w panelach nie wykluczają się wzajemnie i użytkownik potrzebuje kontekstu z wieluzródeł na raz.

Akordeon zmienia tę dynamikę diametralnie. Gdy ustawisz props accordion na true, komponent wymusza regułęjeden-aktywny-na-razy: otwarcie nowego panelu automatycznie zamyka poprzednio otwarty. Mechanizm działa wewnątrzstanu komponentu Ant Design śledzi, który panel był ostatnio aktywny, i gdy użytkownik kliknie kolejny, animujezamknięcie poprzedniego przed otwarciem nowego. Przejście trwa około 200-300 milisekund w zależności od zawartościpanelu.

Akordeon idealnie sprawdza się w nawigacyjnych patternach, gdzie chcesz, żeby użytkownik skupił się na jednym fragmencieinformacji. Typowy przykład: panel informacyjny w wizardzie aplikacji, gdzie każdy krok odpowiada jednemu panelowi,użytkownik przechodzi przez nie liniowo. Warto jednak pamiętać, że akordeon to nie to samo co progresywnydisclosure tutaj masz pełną kontrolę, a panel trzeci może pozostać zamknięty nawet jeśli panel pierwszy i drugisą otwarte w innych kontekstach.

Opcje rozmiaru komponentu obsługują trzy wartości przez props size: small, default i large. Różnicaprzejawia się głównie w wysokości nagłówka panelu oraz wielkości czcionki etykiety. Dla large Ant Design ustawiafont-size: 16px i padding: 12px 24px, podczas gdy small to odpowiednio 14px i 8px 16px.Wybór rozmiaru powinien korelować z gęstością informacji w panelu im więcej treści, tym większy panel, inaczej użytkownikodczuje dyskomfort wizualny.

Konfiguracja początkowego stanu rozwinięcia wymaga przekazania tablicy aktywnych kluczy do propsa activeKey. Dlapojedynczego panelu możesz użyć stringa, dla wielu paneli tablicy stringów. Ant Design porównuje przekazaną wartość zaktualnym stanem podczas każdego renderowania jeśli zmienisz activeKey z poziomu komponentu nadrzędnego,Collapse zareaguje animacją rozwinięcia lub zamknięcia. Pamiętaj, że kontrolowany tryb wymaga też obsługi callbackaonChange, który aktualizuje stan w nadrzędnym komponencie bez tego stracisz synchronizację.

Stylowanie, ukrywanie strzałki i semantyczne modyfikacje znaczników

Strzałka wskazująca kierunek rozwinięcia jest renderowana jako ikona chevron wewnątrz nagłówka panelu. Możesz ją wyłączyćglobalnie przez props expandIcon ustawiony na false, albo per-panel poprzez przekazanie funkcji do tego samegoprosa. Funkcja otrzymuje obiekt z właściwościami isActive i disabled oraz element panelu, co pozwala nawprogramowe renderowanie własnej ikony lub całkowite usunięcie wskaźnika. Ukrycie strzałki zmienia układ nagłówka-warto wtedy rozważyć dodanie visualnego cue w postaci zmiany koloru tła przy hover.

Semantyczne stylowanie znaczników HTML realizujesz przez propsy className, style, classNames i styles.Te ostatnie pozwalają na kierowanie stylów do konkretnych części panelu: wrapper dla kontenera całego elementu,item dla pojedynczego panelu, header dla nagłówka, body dla treści, extra dla elementu dodatkowego.Odpowiednik style przyjmuje obiekt lub funkcję zwracającą obiekt, co daje możliwość warunkowego stylowania napodstawie stanu panelu.

Tryb bez obramowania osiągasz przez modyfikację CSS komponentu. Ant Design stosuje klasę .ant-collapse-borderlessdo kontenera, co usuwa obramowanie paneli i zmienia tło na przezroczyste. Jeśli chcesz zachować spójność z resztąinterfejsu, możesz przekazać własne style przez props style na poziomie całego komponentu na przykład ustawićborderRadius dla zaokrąglenia zewnętrznych krawędzi lub backgroundColor dla koloru tła wszystkich paneli.Pamiętaj jednak, że style inline mają wyższy priorytet niż klasy, więc niektóre właściwości zdefiniowane przezAnt Design mogą wymagać !important.

Dodatkowy element w prawym górnym rogu nagłówka definiujesz przez pole extra w obiekcie konfiguracyjnym panelu.Trafia tam renderowana zawartość, która nie jest częścią tytułu ani strzałki. Typowe użycia to przyciski akcji, checkboxy selekcjiwielokrotnej, ikony statusu. Element extra jest renderowany w osobnym flex-container wewnątrz nagłówka, cooznacza, że nie wpływa na układ tytułu ani strzałki zachowuje stałą pozycję niezależnie od długości etykietypanelu.

Mechanizm collapsible pozwala zmienić obszar wyzwalania rozwinięcia. Domyślnie kliknięcie w dowolne miejsce nagłówkapowoduje toggle. Możesz ograniczyć to do konkretnego elementu wewnątrz nagłówka, używając wartości header -wtedy tylko kliknięcie w sam tytuł przełącza stan, a kliknięcie w obszar rozszerzony nie wywołuje akcji. Jeszcze bardziejrestrykcyjny tryb to disabled, który całkowicie blokuje interakcję. To przydatne, gdy chcesz, żeby panel byłinformacyjny i niepodlegający toggle, ale jednocześnie prezentowany w spójnej strukturze z pozostałymi panelami.

Pytania i odpowiedzi dotyczące komponentu Collapse w Ant Design