Wzorzec 11

Zakładki bez windy

Każda zakładka niesie inną ilość treści, więc naiwny panel zmienia wysokość przy każdym przełączeniu i wszystko pod nim faluje. Wystarczy położyć wszystkie panele w jednej komórce siatki: nieaktywne są niewidzialne, ale wciąż liczą się do wysokości.

Te same zakładki, dwa panele

Jeden pasek steruje oboma panelami. Lewy renderuje tylko aktywną treść i faluje, prawy trzyma wysokość najdłuższej zakładki.

✕ Wysokość za aktywną zakładką

Rebranding studia Atlas: nowa identyfikacja, strona i system szablonów dla zespołu marketingu.

Obserwuj tę linię przy przełączaniu

✓ Rezerwa najwyższego panelu

Rebranding studia Atlas: nowa identyfikacja, strona i system szablonów dla zespołu marketingu.

Księga znaku z wariantami monochromatycznymi.
Strona na Astro z wyspami interaktywności.
Biblioteka Figmy ze zmiennymi zmapowanymi na tokeny CSS.
Szablony ofert i prezentacji w trzech formatach.
Testy Core Web Vitals w CI jako budżet wydajności.

Start w marcu 2026, warsztaty tożsamości w kwietniu, publikacja biblioteki w maju. Wdrożenie strony zaplanowane na sierpień.

Obserwuj tę linię przy przełączaniu

Reguły

Wszystkie panele mieszkają w jednej komórce grid, aktywny jest widoczny, reszta niewidzialna.
Wysokość sekcji to maksimum ze wszystkich paneli, policzone przez przeglądarkę, nie przez skrypt.
Nieaktywne panele mają visibility hidden oraz inert, więc są poza fokusem i czytnikami.
Przełączenie zakładki nie przesuwa niczego poza zawartością panelu.

Wzorzec w kodzie

Panele w jednej komórce, invisible i inert zamiast unmountu

<div className="grid">
  {tabs.map((tab) => (
    <div
      key={tab.id}
      role="tabpanel"
      inert={active !== tab.id}
      className={
        active === tab.id
          ? "col-start-1 row-start-1"
          : "col-start-1 row-start-1 invisible"
      }
    >
      {tab.content}
    </div>
  ))}
</div>

Zakładka to tab z aria-selected

<button
  role="tab"
  aria-selected={active === tab.id}
  aria-controls={"panel-" + tab.id}
  onClick={() => setActive(tab.id)}
>
  {tab.name}
</button>

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zaimplementuj w moim projekcie wzorzec „Zakładki bez windy" z metodologii Liquid Design.

Panel zakładek rezerwuje wysokość najwyższej treści, więc przełączanie nie winduje strony w górę i w dół.

Wymagania:
- Wszystkie panele mieszkają w jednej komórce grid, aktywny jest widoczny, reszta niewidzialna.
- Wysokość sekcji to maksimum ze wszystkich paneli, policzone przez przeglądarkę, nie przez skrypt.
- Nieaktywne panele mają visibility hidden oraz inert, więc są poza fokusem i czytnikami.
- Przełączenie zakładki nie przesuwa niczego poza zawartością panelu.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/zakladki